.pbb-button {
background: #2D89EF;
color: #ffffff;
padding: 6px 14px;
border-radius: 6px;
text-decoration: none;
display: inline-block;
font-weight: 600;
font-size: 14px;
line-height: 1.2;
transition: all 0.25s ease;
box-shadow: 0 0 6px rgba(45, 137, 239, 0.6);
}
.pbb-button:hover {
background: #1b6fd6;
box-shadow: 0 0 14px rgba(45, 137, 239, 0.9);
transform: translateY(-1px);
} .pbb-list ul {
list-style: none;
padding-left: 0;
margin: 20px 0;
}
.pbb-list li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
line-height: 1.6;
} .pbb-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 7px;
height: 7px;
background: #2D89EF;
border-radius: 50%;
box-shadow: 0 0 6px rgba(45, 137, 239, 0.7);
} .pbb-callout {
padding: 16px 18px;
margin: 24px 0;
border-left: 4px solid #2D89EF;
background: #0f1620;
border-radius: 8px;
font-size: 14px;
line-height: 1.6;
color: #e6edf3;
box-shadow: 0 0 8px rgba(45, 137, 239, 0.25);
} .pbb-callout-tip {
border-left-color: #2D89EF;
} .pbb-callout-warning {
border-left-color: #e5533d;
} .pbb-callout-note {
border-left-color: #f4b400;
} .pbb-divider {
height: 1px;
margin: 40px 0;
background: linear-gradient(
to right,
transparent,
rgba(45, 137, 239, 0.7),
transparent
);
box-shadow: 0 0 8px rgba(45, 137, 239, 0.4);
} .pbb-quote {
margin: 30px 0;
padding: 18px 22px;
font-style: italic;
font-size: 16px;
line-height: 1.7;
border-left: 4px solid #2D89EF;
background: #0f1620;
border-radius: 8px;
color: #e6edf3;
box-shadow: 0 0 10px rgba(45, 137, 239, 0.25);
}
.pbb-quote::before {
content: "“";
font-size: 34px;
color: #2D89EF;
margin-right: 6px;
}
.pbb-quote-author {
margin-top: 10px;
font-size: 13px;
opacity: 0.8;
text-align: right;
font-style: normal;
color: #9aa6b2;
} .pbb-takeaway {
margin: 24px 0;
padding: 18px 20px;
border-left: 4px solid #2D89EF;
background: #0f1620;
border-radius: 8px;
font-size: 15px;
line-height: 1.6;
color: #e6edf3;
box-shadow: 0 0 8px rgba(45, 137, 239, 0.25);
position: relative;
}
.pbb-takeaway::before {
content: "📌 Key Takeaway";
display: block;
font-size: 13px;
font-weight: 600;
color: #2D89EF;
margin-bottom: 6px;
} .pbb-video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin: 30px 0;
border-radius: 10px;
box-shadow: 0 0 10px rgba(45, 137, 239, 0.35);
background: #0f1620;
transition: box-shadow 0.25s ease;
}
.pbb-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 10px;
}
.pbb-video:hover {
box-shadow: 0 0 16px rgba(45, 137, 239, 0.55);
} .pbb-image {
margin: 30px 0;
text-align: center;
}
.pbb-image img {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(45, 137, 239, 0.35);
display: block;
margin: auto;
transition: all 0.25s ease;
}
.pbb-image img:hover {
box-shadow: 0 0 16px rgba(45, 137, 239, 0.55);
transform: scale(1.02);
}
.pbb-image-caption {
margin-top: 8px;
font-size: 13px;
opacity: 0.75;
}.pch-wrap,
.pch-card,
.pch-card-content,
.pch-content,
.pch-single,
.pch-page {
box-sizing: border-box;
}
.pch-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
}
.pch-card img,
.pch-content img,
.pch-single-image img {
max-width: 100%;
display: block;
} .pch-page {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.pch-main {
flex: 1;
width: 100%;
padding: 0;
}
.pch-main-content {
position: relative;
z-index: 2;
flex: 1;
padding-top: 48px;
padding-bottom: 140px;
}
.pch-single-shell {
width: 100%;
min-height: auto;
padding-top: 0;
} .post-type-archive-creative_post footer,
.single-creative_post footer,
.post-type-archive-creative_post .site-footer,
.single-creative_post .site-footer {
position: static !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
z-index: 1;
} .post-type-archive-creative_post .pch-featured,
.post-type-archive-creative_post .pch-card,
.post-type-archive-creative_post .pch-empty,
.single-creative_post .pch-related,
.single-creative_post .pch-single {
position: relative;
z-index: 3;
} .pch-hero {
padding: 72px 20px 36px;
text-align: center;
}
.pch-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 10px;
line-height: 1.15;
}
.pch-subtitle {
max-width: 600px;
margin: 0 auto;
opacity: 0.7;
line-height: 1.6;
} .pch-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 22px;
}
.pch-filter-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: inherit;
text-decoration: none;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.2s ease;
}
.pch-filter-pill:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.10);
}
.pch-filter-pill.active {
background: linear-gradient(135deg, #3b82f6, #60a5fa);
color: #fff;
border-color: transparent;
box-shadow: 0 8px 22px rgba(59,130,246,0.28);
} .pch-featured {
margin-bottom: 40px;
}
.pch-featured-card {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 30px;
background: #111;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.pch-featured-image {
overflow: hidden;
border-radius: 28px 0 0 28px;
}
.pch-featured-image img {
width: 100%;
height: 100%;
min-height: 340px;
object-fit: cover;
display: block;
}
.pch-featured-content {
padding: 36px;
display: flex;
flex-direction: column;
justify-content: center;
}
.pch-featured-label {
font-size: 0.75rem;
text-transform: uppercase;
opacity: 0.6;
margin-bottom: 10px;
letter-spacing: 1px;
}
.pch-featured-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 14px;
line-height: 1.2;
}
.pch-featured-title a {
text-decoration: none;
color: inherit;
}
.pch-featured-excerpt {
opacity: 0.85;
line-height: 1.7;
margin-bottom: 18px;
}
.pch-featured-readmore {
font-weight: 600;
text-decoration: none;
opacity: 0.85;
}
.pch-featured-readmore:hover {
opacity: 1;
} .pch-section-heading {
margin: 24px 0 22px;
}
.pch-section-heading h2 {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.2;
margin: 0;
}
.pch-section-heading-list {
margin-top: 48px;
}
.pch-grid-more {
margin-bottom: 80px;
} .pch-grid {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
margin-bottom: 80px;
}
.pch-card {
background: #111;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,0.18);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pch-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0,0,0,0.22);
}
.pch-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
.pch-card-content {
padding: 24px;
}
.pch-card-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 12px;
line-height: 1.35;
}
.pch-card-title a {
text-decoration: none;
color: inherit;
}
.pch-card-excerpt {
opacity: 0.85;
line-height: 1.7;
}
.pch-readmore {
display: inline-block;
margin-top: 14px;
font-size: 0.9rem;
font-weight: 600;
opacity: 0.8;
text-decoration: none;
}
.pch-readmore:hover {
opacity: 1;
} .pch-empty {
text-align: center;
padding: 100px 20px 140px;
opacity: 0.75;
}  .single-creative_post .site-header,
.single-creative_post header.site-header {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
} .single-creative_post .site-main,
.single-creative_post main,
.single-creative_post .pch-single-shell {
margin-top: 0 !important;
padding-top: 0 !important;
} .single-creative_post .pch-single {
padding-top: 72px;
}
.pch-single-title {
font-size: 2.4rem;
font-weight: 800;
margin-bottom: 20px;
line-height: 1.15;
}
.pch-single-image {
margin-bottom: 28px;
}
.pch-single-image img {
width: 100%;
height: auto;
border-radius: 20px;
}
.pch-content {
font-size: 1rem;
line-height: 1.9;
opacity: 0.95;
}
.pch-content p {
margin-bottom: 1.4em;
} .single-creative_post .pch-single-topnav {
position: sticky;
top: 85px;
z-index: 20;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 14px 0;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
transition:
background 0.35s ease,
backdrop-filter 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease,
transform 0.35s ease;
}
.single-creative_post .pch-single-topnav.is-scrolled {
background: rgba(18, 20, 26, 0.88);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.single-creative_post .pch-single-topnav-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 32px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.single-creative_post .pch-single-topbar {
margin: 0;
}
.single-creative_post .pch-single-section-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #d7dce3;
text-decoration: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.single-creative_post .pch-single-section-link:hover {
opacity: 0.85;
transform: translateX(-2px);
}
.single-creative_post .pch-single-cats {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
}
.single-creative_post .pch-single-cat {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: inherit;
text-decoration: none;
font-size: 0.88rem;
font-weight: 600;
transition: all 0.2s ease;
}
.single-creative_post .pch-single-cat:hover {
background: rgba(255,255,255,0.10);
transform: translateY(-2px);
} .pch-related {
margin-top: 80px;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.pch-related-title {
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 28px;
line-height: 1.2;
}  @media (max-width: 1024px) {
.pch-hero {
padding: 56px 20px 32px;
}
.pch-wrap {
padding: 50px 24px;
}
.pch-main-content {
padding-top: 44px;
padding-bottom: 120px;
}
.pch-title {
font-size: 2.2rem;
}
.pch-subtitle {
font-size: 1rem;
max-width: 680px;
}
.pch-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.pch-image img {
height: 220px;
}
.pch-single-shell {
padding-top: 0;
}
.single-creative_post .pch-single-topnav {
top: 82px;
}
.single-creative_post .pch-single-topnav-inner {
padding: 0 24px;
}
.single-creative_post .pch-single {
padding-top: 64px;
}
} @media (max-width: 900px) {
.single-creative_post .pch-single-topnav {
top: 78px;
padding: 11px 0;
}
.single-creative_post .pch-single-topnav-inner {
padding: 0 20px;
gap: 14px;
}
.single-creative_post .pch-single {
padding-top: 58px;
}
.pch-hero {
padding: 44px 20px 28px;
}
} @media (max-width: 768px) {
.pch-hero {
padding: 36px 20px 26px;
}
.pch-wrap {
padding: 40px 20px;
}
.pch-main-content {
padding-top: 40px;
padding-bottom: 110px;
}
.pch-title {
font-size: 2rem;
}
.pch-subtitle {
font-size: 0.98rem;
line-height: 1.7;
max-width: 560px;
}
.pch-filters {
gap: 10px;
margin-top: 18px;
}
.pch-filter-pill {
padding: 9px 16px;
font-size: 0.92rem;
}
.pch-grid {
grid-template-columns: 1fr;
gap: 22px;
margin-bottom: 64px;
}
.pch-card {
border-radius: 18px;
}
.pch-card-content {
padding: 22px;
}
.pch-card-title {
font-size: 1.18rem;
}
.pch-card-excerpt {
font-size: 0.98rem;
line-height: 1.75;
}
.pch-image img {
height: 220px;
}
.pch-empty {
padding: 80px 20px 120px;
}
.pch-single-title {
font-size: 2rem;
}
.pch-featured-card {
grid-template-columns: 1fr;
}
.pch-featured-content {
padding: 24px;
}
.pch-featured-title {
font-size: 1.4rem;
}
.pch-related {
margin-top: 64px;
padding-top: 32px;
}
.pch-related-title {
font-size: 1.5rem;
margin-bottom: 22px;
}
.pch-section-heading h2 {
font-size: 1.35rem;
}
.pch-section-heading-list {
margin-top: 38px;
}
.single-creative_post .pch-single-topnav {
top: 76px;
padding: 10px 0;
}
.single-creative_post .pch-single-topnav-inner {
padding: 0 20px;
gap: 14px;
}
.single-creative_post .pch-single {
padding-top: 56px;
}
.single-creative_post .pch-single-title {
font-size: 2rem;
}
} @media (max-width: 480px) {
.pch-hero {
padding: 28px 18px 22px;
}
.pch-wrap {
padding: 32px 18px;
}
.pch-main-content {
padding-top: 36px;
padding-bottom: 96px;
}
.pch-title {
font-size: 1.75rem;
margin-bottom: 12px;
}
.pch-subtitle {
font-size: 0.95rem;
line-height: 1.75;
}
.pch-filters {
margin-top: 16px;
gap: 10px;
justify-content: flex-start;
}
.pch-filter-pill {
font-size: 0.9rem;
padding: 8px 14px;
}
.pch-card {
border-radius: 16px;
}
.pch-card-content {
padding: 20px 18px;
}
.pch-card-title {
font-size: 1.08rem;
margin-bottom: 10px;
}
.pch-card-excerpt {
font-size: 0.95rem;
line-height: 1.75;
}
.pch-readmore {
font-size: 0.92rem;
margin-top: 16px;
}
.pch-grid {
margin-bottom: 56px;
}
.pch-image img {
height: 200px;
}
.pch-empty {
padding: 70px 16px 110px;
}
.pch-single-title {
font-size: 1.75rem;
}
.pch-content {
font-size: 0.98rem;
line-height: 1.85;
}
.pch-single-cats {
gap: 8px;
}
.pch-single-cat {
font-size: 0.84rem;
padding: 7px 12px;
}
.pch-related {
margin-top: 56px;
padding-top: 28px;
}
.pch-related-title {
font-size: 1.35rem;
margin-bottom: 20px;
}
.pch-section-heading h2 {
font-size: 1.25rem;
}
.pch-section-heading-list {
margin-top: 32px;
}
.single-creative_post .pch-single-topnav {
top: 72px;
padding: 9px 0;
}
.single-creative_post .pch-single-topnav-inner {
padding: 0 18px;
gap: 12px;
}
.single-creative_post .pch-single {
padding-top: 50px;
}
.single-creative_post .pch-single-section-link {
font-size: 0.88rem;
}
.single-creative_post .pch-single-cat {
font-size: 0.84rem;
padding: 7px 12px;
}
.single-creative_post .pch-single-title {
font-size: 1.75rem;
}
} @media (max-width: 360px) {
.pch-hero {
padding: 24px 16px 20px;
}
.pch-filters {
margin-top: 14px;
gap: 8px;
}
.pch-title {
font-size: 1.55rem;
}
.pch-subtitle,
.pch-card-excerpt {
font-size: 0.92rem;
}
.pch-card-content {
padding: 18px 16px;
}
.pch-image img {
height: 185px;
}
.pch-single-title {
font-size: 1.55rem;
}
.single-creative_post .pch-single-topnav {
top: 70px;
padding: 8px 0;
}
.single-creative_post .pch-single-topnav-inner {
padding: 0 16px;
gap: 10px;
}
.single-creative_post .pch-single {
padding-top: 46px;
}
.single-creative_post .pch-single-section-link {
font-size: 0.84rem;
letter-spacing: 0.05em;
}
.single-creative_post .pch-single-cat {
font-size: 0.8rem;
padding: 6px 11px;
}
.single-creative_post .pch-single-title {
font-size: 1.55rem;
}
}.ppg-gallery-wrapper {
width: 100%;
max-width: 100%;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
.ppg-gallery-grid,
.ppg-gallery-grid.premium-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 14px;
margin: 28px 0 10px;
width: 100%;
max-width: 100%;
min-width: 0;
align-items: start;
box-sizing: border-box;
overflow: hidden;
} .ppg-gallery-item {
position: relative;
overflow: hidden;
border-radius: 22px;
background: rgba(255, 255, 255, 0.03);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
border: 1px solid rgba(255, 255, 255, 0.04);
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
opacity: 0;
transform: translateY(36px);
transition:
opacity 1s ease,
transform 1s ease,
box-shadow 0.35s ease;
will-change: opacity, transform;
}
.ppg-gallery-item.ppg-in-view {
opacity: 1;
transform: translateY(0);
}
.ppg-gallery-item:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.30);
}
.ppg-gallery-item a {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
min-width: 0;
position: relative;
text-decoration: none;
overflow: hidden;
border-radius: inherit;
box-sizing: border-box;
}
.ppg-gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: inherit;
filter: grayscale(20%) brightness(0.88) saturate(0.85);
transform: scale(1.01);
transition: transform 0.5s ease, filter 0.45s ease;
}
.ppg-gallery-item:hover img {
transform: scale(1.06);
filter: grayscale(0%) brightness(1) saturate(1);
} .ppg-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding: 18px;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.50) 0%,
rgba(0, 0, 0, 0.12) 45%,
rgba(0, 0, 0, 0.02) 100%
);
opacity: 0;
transition: opacity 0.3s ease;
}
.ppg-gallery-item:hover .ppg-overlay {
opacity: 1;
}
.ppg-overlay-inner {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(14, 99, 255, 0.16);
border: 1px solid rgba(77, 148, 255, 0.28);
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 10px 14px;
border-radius: 999px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
} .ppg-caption {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 13px;
line-height: 1.4;
opacity: 0;
transform: translateY(10px);
transition: all 0.25s ease;
pointer-events: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.ppg-gallery-item:hover .ppg-caption {
opacity: 1;
transform: translateY(0);
} .ppg-square {
aspect-ratio: 1 / 1;
}
.ppg-tall {
aspect-ratio: 5 / 6;
}
.ppg-wide {
grid-column: span 2;
aspect-ratio: 16 / 10;
}
.ppg-large {
grid-column: span 2;
aspect-ratio: 16 / 10;
} .ppg-gallery-cover {
margin-bottom: 24px;
border-radius: 28px;
overflow: hidden;
background: rgba(255, 255, 255, 0.03);
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.ppg-gallery-cover img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 28px;
max-height: 540px;
} .ppg-lightbox {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
display: none;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 40px;
}
.ppg-lightbox.active {
display: flex;
}
.ppg-lightbox-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: 92vw;
max-height: 88vh;
}
.ppg-lightbox-image {
max-width: 92vw;
max-height: 88vh;
border-radius: 18px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.ppg-lightbox-caption {
margin-top: 16px;
padding: 12px 16px;
max-width: 760px;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 1.6;
background: rgba(255, 255, 255, 0.08);
border-radius: 14px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.ppg-lightbox-close,
.ppg-lightbox-prev,
.ppg-lightbox-next {
position: absolute;
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: none;
width: 52px;
height: 52px;
border-radius: 999px;
font-size: 24px;
cursor: pointer;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background 0.25s ease, transform 0.2s ease;
}
.ppg-lightbox-close:hover,
.ppg-lightbox-prev:hover,
.ppg-lightbox-next:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.ppg-lightbox-close {
top: 20px;
right: 20px;
font-size: 30px;
}
.ppg-lightbox-prev {
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.ppg-lightbox-next {
right: 20px;
top: 50%;
transform: translateY(-50%);
}  @media (max-width: 1024px) {
.ppg-gallery-grid,
.ppg-gallery-grid.premium-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.ppg-gallery-item,
.ppg-gallery-item.ppg-wide,
.ppg-gallery-item.ppg-tall,
.ppg-gallery-item.ppg-square,
.ppg-gallery-item.ppg-large {
grid-column: span 1 !important;
aspect-ratio: 1 / 1;
}
.ppg-gallery-item:first-child {
grid-column: span 2 !important;
aspect-ratio: 16 / 9;
}
} @media (max-width: 900px) {
.ppg-gallery-grid,
.ppg-gallery-grid.premium-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.ppg-gallery-item:first-child {
grid-column: span 2 !important;
aspect-ratio: 16 / 10;
}
} @media (max-width: 768px) {
.ppg-gallery-grid,
.ppg-gallery-grid.premium-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ppg-gallery-item,
.ppg-gallery-item.ppg-wide,
.ppg-gallery-item.ppg-tall,
.ppg-gallery-item.ppg-square,
.ppg-gallery-item.ppg-large {
grid-column: span 1 !important;
aspect-ratio: 1 / 1;
border-radius: 20px;
}
.ppg-gallery-item:first-child {
grid-column: span 2 !important;
aspect-ratio: 16 / 10;
}
} @media (max-width: 480px) {
.ppg-gallery-grid,
.ppg-gallery-grid.premium-gallery {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.ppg-gallery-item,
.ppg-gallery-item.ppg-wide,
.ppg-gallery-item.ppg-tall,
.ppg-gallery-item.ppg-square,
.ppg-gallery-item.ppg-large {
grid-column: span 1 !important;
aspect-ratio: 1 / 1;
border-radius: 18px;
}
.ppg-gallery-item:first-child {
grid-column: span 2 !important;
aspect-ratio: 16 / 10;
}
.ppg-caption {
font-size: 12px;
padding: 9px 12px;
}
.ppg-overlay-inner {
font-size: 12px;
padding: 8px 12px;
}
} @media (max-width: 360px) {
.ppg-gallery-grid,
.ppg-gallery-grid.premium-gallery {
grid-template-columns: 1fr;
gap: 10px;
}
.ppg-gallery-item,
.ppg-gallery-item.ppg-wide,
.ppg-gallery-item.ppg-tall,
.ppg-gallery-item.ppg-square,
.ppg-gallery-item.ppg-large,
.ppg-gallery-item:first-child {
grid-column: span 1 !important;
aspect-ratio: 4 / 5;
border-radius: 18px;
}
}.pss-share-wrap {
margin-top: 42px;
padding-top: 22px;
border-top: 1px solid #e7dfd5;
text-align: center;
}
.pss-main-share-btn {
background: #5e4b3c;
color: #fff;
border: none;
padding: 12px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.pss-main-share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(182, 146, 103, 0.2);
} .pss-share-dock {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
display: flex;
align-items: center;
pointer-events: auto;
} .pss-share-dock-handle {
background: linear-gradient(180deg, #8b6a4f, #5e4b3c);
color: #fff;
width: 52px;
height: 132px;
border-radius: 0 18px 18px 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 2;
box-shadow:
0 0 18px rgba(182, 146, 103, 0.24),
0 8px 22px rgba(0, 0, 0, 0.18);
}
.pss-share-dock-handle span {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
} .pss-share-dock-panel {
background: rgba(10, 14, 20, 0.96);
border: 1px solid rgba(182, 146, 103, 0.28);
padding: 18px 20px;
border-radius: 20px;
backdrop-filter: blur(10px);
width: max-content;
max-width: 260px;
opacity: 0;
transform: translateX(-16px);
visibility: hidden;
transition: all 0.25s ease;
margin-left: 12px;
position: relative;
z-index: 1;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.25),
0 0 18px rgba(182, 146, 103, 0.12);
} .pss-share-dock:hover .pss-share-dock-panel {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
.pss-share-dock:hover .pss-share-dock-handle {
box-shadow:
0 0 28px rgba(182, 146, 103, 0.34),
0 12px 32px rgba(0, 0, 0, 0.24);
}
.pss-share-dock-label {
color: #d8cbbd;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
margin-bottom: 12px;
white-space: nowrap;
width: max-content;
}
.pss-share-dock-icons {
display: flex;
gap: 10px;
flex-wrap: wrap;
max-width: 160px;
}
.pss-dock-icon {
width: 42px;
height: 42px;
border-radius: 999px;
border: 1px solid rgba(216, 203, 189, 0.24);
background: #fffaf5;
color: #5e4b3c;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.18s ease;
padding: 0;
}
.pss-dock-icon svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.pss-dock-icon:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 0 18px rgba(182, 146, 103, 0.28);
border-color: #b69267;
}
.pss-dock-copy {
background: #7a5d45;
color: #fff;
border-color: #7a5d45;
}
.pss-dock-icon.is-copied {
background: #5e4b3c;
color: #fff;
border-color: #5e4b3c;
} body.pss-modal-open {
overflow: hidden;
}
.pss-modal {
position: fixed;
inset: 0;
display: none;
z-index: 9999;
}
.pss-modal.active {
display: block;
}
.pss-modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
}
.pss-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.95);
background: #fffaf5;
padding: 30px 28px;
border-radius: 20px;
width: min(90vw, 360px);
text-align: center;
transition: all 0.2s ease;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}
.pss-modal.active .pss-modal-content {
transform: translate(-50%, -50%) scale(1);
}
.pss-modal-content h3 {
margin: 0 0 18px;
color: #5e4b3c;
font-size: 26px;
font-weight: 700;
}
.pss-close {
position: absolute;
top: 12px;
right: 14px;
border: none;
background: none;
font-size: 30px;
line-height: 1;
cursor: pointer;
color: #5e4b3c;
}
.pss-modal-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 10px;
}
.pss-action {
padding: 14px 16px;
border-radius: 14px;
border: 1px solid #ddd;
cursor: pointer;
background: #f1f1f3;
color: #111;
font-size: 17px;
font-weight: 600;
transition: all 0.2s ease;
}
.pss-action:hover {
transform: translateY(-2px);
border-color: #b69267;
box-shadow: 0 8px 20px rgba(182, 146, 103, 0.12);
}
.pss-copy {
background: #5e4b3c;
color: #fff;
border-color: #5e4b3c;
}
.pss-copy:hover {
border-color: #5e4b3c;
} .pss-inline-mobile-fallback {
display: none;
} @media (max-width: 1024px) {
.pss-share-dock {
display: none;
}
.pss-inline-mobile-fallback {
display: block;
}
.pss-main-share-btn {
width: 100%;
max-width: 280px;
}
}
@media (max-width: 640px) {
.pss-modal-content h3 {
font-size: 22px;
}
.pss-action {
font-size: 16px;
}
}html {
scroll-behavior: smooth;
overflow-x: hidden;
min-height: 100%;
height: 100%;
}
body {
min-height: 100vh;
min-height: 100dvh;
margin: 0;
display: flex;
flex-direction: column;
background-color: #111315;
color: #E5E7EB;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
} main {
width: 100%;
display: block;
}
.site-main,
.blog-page {
width: 100%;
display: block;
flex: 0 0 auto;
}
section {
max-width: 1100px;
margin: 0 auto;
padding: 140px 0;
border-bottom: 1px solid rgba(255,255,255,0.03);
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
} .home main,
.blog main,
.archive main,
.single-post main,
.page main,
.post-type-archive-creative_post main,
.single-creative_post main {
padding-top: 100px;
padding-bottom: 60px;
}
.page main,
.page .site-main {
padding-top: 120px;
padding-bottom: 60px;
}
.blog-page {
padding-top: 120px;
padding-bottom: 60px;
} .site-header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(17, 19, 21, 0.9);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(255,255,255,0.05);
z-index: 1000;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 88px;
position: relative;
}
.logo img {
height: 80px;
width: auto;
}
.logo span {
color: #fff;
font-weight: 700;
font-size: 20px;
text-decoration: none;
}  .submenu-toggle {
display: none;
} .main-nav {
display: flex;
align-items: center;
}
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav > ul {
display: flex;
align-items: center;
gap: 36px;
}
.main-nav li {
position: relative;
} .main-nav > ul > li > a {
text-decoration: none;
color: #cfd8e3;
font-size: 14px;
line-height: 1;
transition: color 0.2s ease;
}
.main-nav > ul > li > a:hover {
color: #ffffff;
} .main-nav .sub-menu {
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 260px;
padding: 10px;
background: rgba(15, 22, 32, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
box-shadow: 0 14px 30px rgba(0,0,0,0.35);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: all 0.2s ease;
z-index: 999;
}
.main-nav li:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
} .main-nav > ul > li:last-child > .sub-menu,
.main-nav > ul > li:nth-last-child(2) > .sub-menu {
left: auto;
right: 0;
} .main-nav .sub-menu li {
width: 100%;
}
.main-nav .sub-menu li + li {
margin-top: 6px;
}
.main-nav .sub-menu a {
display: block;
padding: 12px 16px;
border-radius: 12px;
color: #dbe7f5;
font-size: 14px;
line-height: 1.5;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.main-nav .sub-menu a:hover {
background: rgba(45,137,239,0.10);
color: #ffffff;
} .main-nav .sub-menu .sub-menu {
position: absolute;
top: 0;
left: calc(100% + 18px);
min-width: 240px;
padding: 10px;
background: rgba(15, 22, 32, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
box-shadow: 0 14px 30px rgba(0,0,0,0.35);
opacity: 0;
visibility: hidden;
transform: translateX(8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
z-index: 1001;
}
.main-nav .sub-menu li.menu-item-has-children {
position: relative;
}
.main-nav .sub-menu li.menu-item-has-children:hover > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateX(0);
} .main-nav .sub-menu .sub-menu.open-left {
left: auto;
right: calc(100% + 18px);
transform: translateX(-8px);
}
.main-nav .sub-menu li.menu-item-has-children:hover > .sub-menu.open-left {
transform: translateX(0);
} .main-nav .sub-menu li.menu-item-has-children::after {
content: "";
position: absolute;
top: 0;
right: -18px;
width: 18px;
height: 100%;
}
.main-nav .sub-menu li.menu-item-has-children.open-left-parent::before {
content: "";
position: absolute;
top: 0;
left: -18px;
width: 18px;
height: 100%;
} @media (min-width: 901px) {
.main-nav > ul > li.menu-item-has-children > a::after {
content: "";
display: inline-block;
margin-left: 6px;
width: 5px;
height: 5px;
border-right: 1.5px solid rgba(255,255,255,0.7);
border-bottom: 1.5px solid rgba(255,255,255,0.7);
transform: rotate(45deg) translateY(-1px);
transition: transform 0.2s ease;
}
.main-nav > ul > li.menu-item-has-children:hover > a::after {
transform: rotate(225deg) translateY(0);
}
.main-nav .sub-menu li.menu-item-has-children > a {
position: relative;
padding-right: 38px;
}
.main-nav .sub-menu li.menu-item-has-children > a::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 7px;
height: 7px;
border-top: 1.5px solid rgba(255,255,255,0.7);
border-right: 1.5px solid rgba(255,255,255,0.7);
transform: translateY(-50%) rotate(45deg);
}
} .menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 1001;
}
.menu-toggle span {
display: block;
width: 26px;
height: 2px;
background: #ffffff;
border-radius: 2px;
transition: all 0.25s ease;
}
.menu-toggle.active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} #about {
padding-top: 140px;
padding-bottom: 120px;
}
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
}
.hero-label,
.hero-tagline {
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #5AA8FF;
margin-bottom: 20px;
text-shadow:
0 0 6px rgba(58, 134, 255, 0.6),
0 0 18px rgba(58, 134, 255, 0.35);
}
.hero h1 {
font-size: 54px;
line-height: 1.1;
margin: 0 0 24px;
}
.hero h3 {
font-weight: 400;
color: #9CA3AF;
margin-bottom: 20px;
}
.hero-description {
color: #9CA3AF;
max-width: 500px;
margin-bottom: 30px;
line-height: 1.8;
}
.hero-buttons {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.btn-primary,
.btn-secondary {
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
transition: 0.3s ease;
}
.btn-primary {
background-color: #3A86FF;
color: #fff;
}
.btn-primary:hover {
background-color: #2f6fce;
}
.btn-secondary {
border: 1px solid #3A86FF;
color: #3A86FF;
}
.btn-secondary:hover {
background-color: #3A86FF;
color: #fff;
}
.hero-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-image::before {
content: "";
position: absolute;
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(58,134,255,0.18) 0%, rgba(58,134,255,0.03) 70%, transparent 100%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: blur(60px);
z-index: 1;
}
.hero-image-wrapper {
width: 420px;
height: 520px;
border-radius: 18px;
overflow: hidden;
position: relative;
z-index: 2;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hero-photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
transition: transform 0.4s ease;
}
.hero-image:hover .hero-photo {
transform: scale(1.05);
} .career-list {
position: relative;
margin-top: 80px;
padding-left: 40px;
}
.career-list::before {
content: "";
position: absolute;
left: 12px;
top: 0;
width: 2px;
height: 100%;
background: rgba(255,255,255,0.08);
}
.career-item {
position: relative;
margin-bottom: 60px;
display: flex;
align-items: flex-start;
}
.career-marker {
width: 14px;
height: 14px;
background: #3A86FF;
border-radius: 50%;
position: absolute;
left: -1px;
top: 6px;
box-shadow: 0 0 0 4px rgba(58,134,255,0.15);
}
.career-details {
margin-left: 40px;
}
.career-item h3 {
margin-top: 0;
margin-bottom: 10px;
}
.career-content {
color: #9CA3AF;
line-height: 1.8;
}
.career-meta {
font-size: 14px;
color: #9CA3AF;
margin-bottom: 10px;
}
.career-company {
font-weight: 600;
color: #E5E7EB;
display: block;
}
.career-dates {
font-size: 13px;
}
.career-status {
display: inline-block;
margin-left: 10px;
padding: 3px 8px;
font-size: 11px;
letter-spacing: 0.5px;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
} .capabilities-grid {
margin-top: 60px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.capability-item {
background: #161A1F;
padding: 35px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.05);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.capability-item:hover {
transform: translateY(-6px);
border-color: rgba(255,255,255,0.12);
box-shadow: 0 10px 40px rgba(58,134,255,0.08);
}
.capability-title {
margin-top: 0;
margin-bottom: 15px;
font-size: 20px;
}
.capability-content {
color: #9CA3AF;
font-size: 14px;
line-height: 1.8;
} .testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
margin-top: 50px;
}
.testimonial-item {
position: relative;
}
.testimonial-bubble {
background: #111c2a;
padding: 28px 28px 34px;
border-radius: 14px;
color: #dbe7f5;
line-height: 1.8;
box-shadow: 0 0 10px rgba(45,137,239,0.15);
transition: 0.25s ease;
}
.testimonial-bubble p {
margin: 0;
}
.testimonial-item:hover .testimonial-bubble {
box-shadow: 0 0 18px rgba(45,137,239,0.35);
}
.testimonial-footer {
display: flex;
align-items: center;
margin-top: -22px;
margin-left: 22px;
position: relative;
z-index: 2;
}
.testimonial-avatar {
width: 72px;
height: 72px;
min-width: 72px;
min-height: 72px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #0b1118;
background: #0b1118;
box-shadow: 0 0 12px rgba(45,137,239,0.35);
margin-right: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.testimonial-avatar.is-fallback {
background: linear-gradient(135deg, #16345c, #2271b1);
color: #fff;
font-weight: 700;
font-size: 22px;
letter-spacing: 1px;
text-transform: uppercase;
}
.testimonial-avatar.is-fallback span {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.testimonial-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.testimonial-name {
font-weight: 700;
color: #ffffff;
font-size: 16px;
margin-bottom: 4px;
}
.testimonial-role {
font-size: 13px;
color: #8ea6c0;
} .blog-controls {
margin-bottom: 40px;
}
.blog-search-form {
display: flex;
gap: 12px;
max-width: 500px;
}
.blog-search-form input {
flex: 1;
padding: 12px 16px;
border-radius: 8px;
border: 1px solid #2c2c2c;
background: #111;
color: #fff;
font-size: 14px;
outline: none;
}
.blog-search-form input::placeholder {
color: #777;
}
.blog-search-form input:focus {
border-color: #3A86FF;
}
.blog-search-form button {
padding: 12px 20px;
border-radius: 8px;
border: none;
background: #2d7ff9;
color: #fff;
font-weight: 500;
cursor: pointer;
transition: 0.2s ease;
}
.blog-search-form button:hover {
background: #1f5fd4;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.blog-card {
background: #161A1F;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.05);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(58,134,255,0.08);
}
.blog-image img {
width: 100%;
height: 200px;
object-fit: cover;
}
.blog-content {
padding: 20px;
}
.blog-category-badge {
display: inline-block;
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
margin-bottom: 12px;
background: rgba(77, 163, 255, 0.12);
color: #4da3ff;
border-radius: 20px;
letter-spacing: 0.5px;
}
.blog-title {
margin-bottom: 10px;
}
.blog-title a {
color: #fff;
text-decoration: none;
}
.blog-excerpt {
color: #B5BDC8;
margin-bottom: 15px;
line-height: 1.8;
}
.blog-read-more {
color: #4da3ff;
font-weight: 500;
text-decoration: none;
}
.blog-view-more {
text-align: center;
margin-top: 40px;
}
.pagination {
margin-top: 50px;
text-align: center;
grid-column: 1 / -1;
}
.pagination .page-numbers {
display: inline-block;
margin: 0 6px;
padding: 6px 12px;
border-radius: 6px;
background: #1c1c1c;
color: #ccc;
text-decoration: none;
font-size: 14px;
}
.pagination .current,
.pagination a:hover {
background: #2d7ff9;
color: #fff;
} .post-full {
max-width: 760px;
margin: 0 auto;
}
.post-featured-image {
margin-bottom: 30px;
border-radius: 16px;
overflow: hidden;
}
.post-featured-image img {
width: 100%;
height: 400px;
object-fit: cover;
}
.post-title {
font-size: 42px;
line-height: 1.2;
margin-bottom: 15px;
}
.post-meta {
font-size: 14px;
color: #888;
margin-bottom: 40px;
display: flex;
align-items: center;
gap: 8px;
}
.meta-separator {
opacity: 0.6;
}
.post-meta a {
color: #4da3ff;
text-decoration: none;
}
.post-meta a:hover {
opacity: 0.7;
}
.post-content {
font-size: 17px;
line-height: 1.9;
color: #ddd;
}
.post-content p {
margin-bottom: 22px;
text-align: justify;
}
.post-content h2,
.post-content h3 {
margin-top: 40px;
margin-bottom: 15px;
}
.post-content img {
max-width: 100%;
border-radius: 10px;
margin: 25px 0;
}
.post-content figure {
text-align: center;
}
.post-divider {
margin: 60px 0;
height: 1px;
background: rgba(255, 255, 255, 0.08);
border: none;
}
.share-post-wrap,
.post-share,
.single-share,
.share-buttons-wrapper {
margin: 36px 0 42px;
text-align: center;
}
.post-navigation {
display: flex;
justify-content: space-between;
margin-top: 50px;
padding-top: 30px;
gap: 20px;
}
.post-navigation a {
color: #4da3ff;
text-decoration: none;
font-weight: 500;
transition: opacity 0.3s ease;
}
.post-navigation a:hover {
opacity: 0.7;
} .related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.related-card {
background: #161A1F;
border: 1px solid rgba(255,255,255,0.05);
padding: 15px;
border-radius: 12px;
transition: 0.3s ease;
}
.related-card:hover {
box-shadow: 0 10px 40px rgba(58,134,255,0.08);
}
.related-image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 16px;
margin-bottom: 12px;
}
.related-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-card h4 {
font-size: 16px;
margin: 0;
} .post-content .ppg-gallery-grid {
width: 100%;
max-width: 100%;
} .post-content .ppg-gallery-grid img {
margin: 0;
border-radius: 16px; background: none !important;
box-shadow: none !important;
filter: none !important;
opacity: 1 !important;
} .post-content .ppg-gallery-grid figure {
margin: 0;
background: none !important;
} .contact-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 50px;
}
.contact-info-card {
background: #161A1F;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
padding: 30px 20px;
text-align: center;
transition: 0.3s ease;
}
.contact-info-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(58,134,255,0.08);
}
.contact-icon {
font-size: 28px;
margin-bottom: 15px;
}
.contact-icon svg {
width: 28px;
height: 28px;
}
.contact-text {
font-size: 15px;
color: #E5E7EB;
}
.contact-form {
margin-top: 50px;
}
#contact .contact-form {
margin-top: 70px;
padding-top: 40px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.form-row {
display: grid;
gap: 25px;
margin-bottom: 25px;
}
.form-row.three-col {
grid-template-columns: repeat(3, 1fr);
}
.contact-form input,
.contact-form textarea {
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
padding: 14px 16px;
border-radius: 8px;
color: #E5E7EB;
font-size: 14px;
outline: none;
transition: 0.2s ease;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #3A86FF;
box-shadow: 0 0 0 3px rgba(58,134,255,0.15);
}
.contact-form textarea {
resize: vertical;
min-height: 160px;
}
.form-actions {
display: flex;
justify-content: flex-start;
}
.contact-form button {
background: linear-gradient(135deg, #3A86FF, #5B9CFF);
border: none;
padding: 16px 38px;
border-radius: 10px;
font-weight: 600;
letter-spacing: 0.5px;
color: #fff;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 8px 20px rgba(58,134,255,0.25);
}
.contact-form button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(58,134,255,0.35);
} .custom-section-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.custom-section-content > * {
max-width: 100%;
box-sizing: border-box;
}
.section-custom,
.custom-section,
.prototype-custom-section {
width: 100%;
}
.section-custom .section-content,
.custom-section .section-content,
.prototype-custom-section .section-content,
.section-custom-content,
.custom-content {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.section-custom .section-content > * {
max-width: 100%;
box-sizing: border-box;
} .section-custom .section-inner,
.custom-section .section-inner,
.prototype-custom-section .section-inner {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
} .section-custom .container,
.custom-section .container,
.prototype-custom-section .container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
} @media (max-width: 1024px) {
.section-custom .section-inner,
.custom-section .section-inner,
.prototype-custom-section .section-inner {
padding-left: 24px;
padding-right: 24px;
}
}
@media (max-width: 768px) {
.section-custom .section-inner,
.custom-section .section-inner,
.prototype-custom-section .section-inner {
padding-left: 20px;
padding-right: 20px;
}
}
@media (max-width: 480px) {
.section-custom .section-inner,
.custom-section .section-inner,
.prototype-custom-section .section-inner {
padding-left: 16px;
padding-right: 16px;
}
}
@media (max-width: 360px) {
.section-custom .section-inner,
.custom-section .section-inner,
.prototype-custom-section .section-inner {
padding-left: 14px;
padding-right: 14px;
}
} .site-footer {
background: #0C1117;
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: auto;
overflow-x: hidden;
flex-shrink: 0;
width: 100%;
}
.footer-main {
padding: 40px 0 22px;
}
.footer-layout {
display: grid;
grid-template-columns: 1.2fr 0.7fr 1fr;
gap: 36px;
align-items: center;
} .footer-block {
min-width: 0;
width: 100%;
}
.footer-block-text {
text-align: left;
}
.footer-block-center {
text-align: center;
}
.footer-block-media {
text-align: right;
} .footer-block h1,
.footer-block h2,
.footer-block h3,
.footer-block h4,
.footer-block h5,
.footer-block h6,
.footer-block .widget-title {
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
color: #9CA3AF;
margin: 0 0 14px;
}
.footer-block p,
.footer-block li,
.footer-block a,
.footer-block span,
.footer-block div,
.footer-block strong,
.footer-block em {
color: #E5E7EB;
line-height: 1.75;
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;
max-width: 100%;
}
.footer-block p {
margin: 0;
}
.footer-block a {
text-decoration: none;
transition: 0.2s ease;
}
.footer-block a:hover {
color: #3A86FF;
} .footer-block ul,
.footer-block ol {
margin: 0;
padding-left: 18px;
}
.footer-block li {
margin-bottom: 8px;
} .footer-block hr,
.footer-block .wp-block-separator {
display: none !important;
}
.footer-block .widget,
.footer-block .widget_block {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border: 0 !important;
} .footer-block-center .social-icons,
.footer-block-center .footer-social,
.footer-block-center .wp-block-social-links {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
} .footer-block img,
.footer-block video,
.footer-block iframe,
.footer-block .wp-block-embed,
.footer-block .wp-block-embed__wrapper,
.footer-block .wp-video {
width: 100% !important;
max-width: 100%;
height: auto;
display: block;
box-sizing: border-box;
border-radius: 14px;
overflow: hidden;
}
.footer-block iframe {
border: 0;
aspect-ratio: 16 / 9;
}
.footer-block-media iframe,
.footer-block-media video,
.footer-block-media .wp-block-embed,
.footer-block-media .wp-video {
max-width: 360px;
margin-left: auto;
} .footer-bottom {
padding: 18px 0 24px;
text-align: center;
}
.footer-bottom p {
margin: 0;
font-size: 14px;
color: #6B7280;
line-height: 1.6;
} main.single-post {
padding-top: 120px;
padding-bottom: 40px;
flex: 1;
display: flex;
flex-direction: column;
}
main.single-post > .container {
flex: 1;
display: flex;
flex-direction: column;
}
main.single-post .post-full {
max-width: 760px;
margin: 0 auto;
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
}
main.single-post .post-content {
margin-bottom: 0;
}
main.single-post .post-navigation {
margin-top: 50px;
margin-bottom: 0;
padding-bottom: 0;
}
.post-content .pss-share-wrap {
margin-top: 42px;
margin-bottom: 42px;
padding-top: 22px;
}
.post-content .pss-main-share-btn {
padding: 10px 18px;
font-size: 13px;
min-height: 30px;
max-width: 130px;
}
.single-creative_post .pss-main-share-btn {
padding: 10px 18px;
font-size: 13px;
min-height: 30px;
max-width: 130px;
}  .comments-area,
.comments-accordion-wrap,
.comments-inline-trigger {
margin-top: 56px;
}
.comments-accordion-panel {
margin-top: 22px;
overflow: hidden;
transition: all 0.3s ease;
}
.comments-accordion-inner {
display: grid;
gap: 28px;
} .comments-cta-card {
background: #161A1F;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
padding: 28px 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.comments-cta-card:hover {
transform: translateY(-2px);
border-color: rgba(58,134,255,0.18);
box-shadow: 0 10px 28px rgba(58,134,255,0.08);
}
.comments-cta-title,
.comments-title,
.comment-reply-title {
margin: 0 0 8px;
font-size: 28px;
line-height: 1.2;
font-weight: 700;
color: #E5E7EB;
}
.comments-cta-text,
.no-comments {
margin: 0;
color: #9CA3AF;
font-size: 15px;
line-height: 1.7;
}
.comments-open-btn,
.comment-submit-btn,
.comment-form input[type="submit"],
.comment-form .submit {
background: linear-gradient(135deg, #3A86FF, #5B9CFF);
border: none;
padding: 16px 32px;
border-radius: 10px;
font-weight: 600;
letter-spacing: 0.4px;
color: #fff;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 8px 20px rgba(58,134,255,0.25);
white-space: nowrap;
}
.comments-open-btn:hover,
.comment-submit-btn:hover,
.comment-form input[type="submit"]:hover,
.comment-form .submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(58,134,255,0.35);
} .comment-list {
list-style: none;
margin: 0 0 42px;
padding: 0;
}
.comment-list > li {
list-style: none;
margin: 0 0 24px;
padding: 0;
}
.comment-body {
background: #161A1F;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
padding: 26px 28px;
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.comment-body:hover {
transform: translateY(-2px);
border-color: rgba(58,134,255,0.18);
box-shadow: 0 10px 28px rgba(58,134,255,0.08);
} .comment-author {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 10px;
}
.comment-author .avatar,
.comment-author img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(58,134,255,0.24);
box-shadow: 0 0 14px rgba(58,134,255,0.14);
}
.comment-author .fn {
color: #F3F4F6;
font-size: 16px;
font-weight: 700;
font-style: normal;
text-decoration: none;
}
.comment-author a {
color: #F3F4F6;
text-decoration: none;
}
.comment-author a:hover {
color: #5B9CFF;
}
.comment-author .says {
display: none;
}
.comment-metadata,
.comment-metadata a,
.comment-metadata time,
.comment-metadata .edit-link a,
.comment-meta a,
.comment-meta time {
color: #7B8592 !important;
font-size: 13px !important;
font-weight: 400 !important;
text-decoration: none !important;
line-height: 1.5;
}
.comment-metadata {
margin-top: -2px;
margin-bottom: 18px;
opacity: 0.9;
}
.comment-metadata a:hover,
.comment-meta a:hover {
color: #A7B2C2 !important;
text-decoration: none !important;
} .comment-content p {
font-size: 16px;
line-height: 1.85;
color: #E5E7EB;
margin: 0 0 16px;
} .reply a,
.comment-reply-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 6px;
color: #5B9CFF !important;
font-weight: 600;
font-size: 15px;
text-decoration: none !important;
transition: all 0.2s ease;
}
.reply a:hover,
.comment-reply-link:hover {
color: #ffffff !important;
transform: translateX(2px);
} #cancel-comment-reply-link {
display: inline-flex;
align-items: center;
margin-left: 14px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(91,156,255,0.08);
color: #5B9CFF !important;
font-size: 14px;
font-weight: 500;
text-decoration: none !important;
transition: all 0.2s ease;
vertical-align: middle;
}
#cancel-comment-reply-link:hover {
color: #ffffff !important;
background: rgba(91,156,255,0.16);
}
.comment-reply-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
} .comment-list > li > .children {
list-style: none;
margin: 18px 0 0 18px;
padding-left: 22px;
border-left: 1px solid rgba(91,156,255,0.18);
}
.children li {
list-style: none;
margin: 0;
padding: 0;
}
.children .comment-body {
background: transparent;
border: none;
box-shadow: none;
padding: 14px 0 0 0;
margin: 0;
border-radius: 0;
}
.children .comment-body:hover {
transform: none;
box-shadow: none;
border-color: transparent;
}
.children .comment-author {
gap: 14px;
margin-bottom: 8px;
}
.children .comment-author .avatar,
.children .comment-author img {
width: 48px;
height: 48px;
}
.children .comment-author .fn {
font-size: 15px;
}
.children .comment-metadata {
margin-bottom: 12px;
}
.children .comment-content p {
font-size: 15px;
line-height: 1.75;
opacity: 0.96;
margin-bottom: 10px;
}
.children .reply {
margin-top: 4px;
}
.children .children {
margin: 12px 0 0 14px;
padding-left: 14px;
border-left: 1px solid rgba(91,156,255,0.14);
} .bypostauthor > .comment-body {
border-color: rgba(58,134,255,0.24);
box-shadow: 0 0 0 1px rgba(58,134,255,0.08), 0 12px 28px rgba(58,134,255,0.08);
position: relative;
}
.bypostauthor > .comment-body::before {
content: "Author";
position: absolute;
top: 18px;
right: 18px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #3A86FF, #5B9CFF);
padding: 6px 10px;
border-radius: 999px;
letter-spacing: 0.02em;
} .comments-accordion-panel .comment-respond,
.comment-respond {
margin-top: 0;
padding: 34px 32px;
background: #161A1F;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
}
.comment-reply-title {
margin-bottom: 18px;
}
.logged-in-as,
.comment-notes {
color: #9CA3AF;
font-size: 14px;
margin-bottom: 16px;
line-height: 1.7;
}
.logged-in-as a {
color: #4DA3FF;
text-decoration: none;
}
.logged-in-as a:hover {
opacity: 0.8;
} .comment-form {
display: grid;
gap: 20px;
}
.comment-form p {
margin: 0;
}
.comment-form-author,
.comment-form-email {
width: 100%;
}
.comment-form label {
position: absolute;
left: -9999px;
}
.comment-form input,
.comment-form textarea {
font-family: inherit;
}
@media (min-width: 768px) {
.comment-form {
grid-template-columns: 1fr 1fr;
}
.comment-form-comment,
.comment-form-cookies-consent,
.custom-comment-consent,
.form-submit {
grid-column: span 2;
}
} .comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
background: transparent;
border: 1px solid rgba(255,255,255,0.08);
padding: 16px 18px;
border-radius: 12px;
color: #E5E7EB;
font-size: 15px;
outline: none;
transition: 0.2s ease;
box-sizing: border-box;
}
.comment-form input::placeholder,
.comment-form textarea::placeholder {
color: #7D8793;
}
.comment-form input:focus,
.comment-form textarea:focus {
border-color: #3A86FF;
box-shadow: 0 0 0 3px rgba(58,134,255,0.15);
}
.comment-form textarea {
min-height: 180px;
resize: vertical;
line-height: 1.7;
} .comment-form-cookies-consent,
.custom-comment-consent {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #9CA3AF;
line-height: 1.5;
margin-top: 2px;
margin-bottom: 4px;
}
.comment-form-cookies-consent input,
.custom-comment-consent input {
width: 16px;
height: 16px;
min-width: 16px;
accent-color: #3A86FF;
cursor: pointer;
margin: 0;
flex-shrink: 0;
transform: translateY(0);
}
.comment-form-cookies-consent label,
.custom-comment-consent label {
position: static !important;
left: auto !important;
margin: 0 !important;
font-size: 14px;
font-weight: 400;
color: #9CA3AF;
cursor: pointer;
line-height: 1.5;
} .comment-navigation,
.comments-pagination,
.comment-nav-links {
margin-top: 24px;
}
.comment-navigation a,
.comments-pagination a,
.comment-nav-links a,
.comment-navigation span,
.comments-pagination span,
.comment-nav-links span {
display: inline-block;
margin-right: 10px;
color: #4DA3FF;
text-decoration: none;
font-weight: 500;
}
.comment-navigation a:hover,
.comments-pagination a:hover,
.comment-nav-links a:hover {
opacity: 0.8;
} .comment-list:empty::before {
content: "No comments yet. Start the conversation.";
display: block;
color: #9CA3AF;
font-size: 15px;
padding: 10px 0;
} .comment-list #respond {
margin-top: 22px;
margin-left: 18px;
padding-left: 22px;
border-left: 1px solid rgba(91,156,255,0.18);
}
.comment-list #respond.comment-respond {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
border-radius: 0;
}
.comment-list #respond .comment-form {
background: #161A1F;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
padding: 24px;
}
.comment-list #respond .comment-reply-title {
font-size: 22px;
margin-bottom: 18px;
}
.comment-list #respond #cancel-comment-reply-link {
margin-left: 10px;
}
.comment-list #respond textarea {
min-height: 150px;
} .ppg-gallery-grid.premium-gallery {
width: 100%;
max-width: 100%;
} .not-found-page {
padding: 120px 0;
text-align: center;
}
.not-found-section h1 {
font-size: 52px;
margin-bottom: 20px;
}
.not-found-section .hero-description {
max-width: 650px;
margin: 0 auto 30px;
}
.not-found-section .hero-buttons {
justify-content: center;
} .page-entry {
max-width: 860px;
margin: 0 auto;
}
.page-title {
font-size: 42px;
line-height: 1.2;
margin-bottom: 28px;
color: #ffffff;
}
.page-content {
font-size: 18px;
line-height: 1.9;
color: #D1D5DB;
}
.page-content h2,
.page-content h3,
.page-content h4 {
color: #ffffff;
margin-top: 42px;
margin-bottom: 18px;
}
.page-content p {
margin-bottom: 20px;
}
.page-content ul,
.page-content ol {
margin: 0 0 24px 24px;
}
.page-content li {
margin-bottom: 10px;
}
.page-content a {
color: #3A86FF;
text-decoration: underline;
}
.page-content strong {
color: #ffffff;
}  @media (max-width: 1200px) {
.footer-layout {
grid-template-columns: 1fr;
gap: 24px;
text-align: center;
}
.footer-block,
.footer-block-text,
.footer-block-center,
.footer-block-media {
text-align: center !important;
}
.footer-block ul,
.footer-block ol {
padding-left: 0;
list-style-position: inside;
}
.footer-block-media iframe,
.footer-block-media video,
.footer-block-media .wp-block-embed,
.footer-block-media .wp-video {
max-width: 560px;
margin: 0 auto;
}
} @media (max-width: 1024px) {
.footer-main {
padding: 34px 0 20px;
}
.footer-layout {
gap: 22px;
}
} @media (max-width: 900px) {
.footer-main {
padding: 30px 0 18px;
}
.footer-layout {
gap: 20px;
}
.footer-block p,
.footer-block li,
.footer-block a,
.footer-block span,
.footer-block div {
font-size: 15px;
line-height: 1.75;
}
} @media (max-width: 768px) {
.footer-main {
padding: 26px 0 16px;
}
.footer-layout {
gap: 18px;
}
.footer-block {
padding: 0;
}
.footer-block h1,
.footer-block h2,
.footer-block h3,
.footer-block h4,
.footer-block h5,
.footer-block h6,
.footer-block .widget-title {
font-size: 13px;
margin-bottom: 10px;
}
.footer-block p,
.footer-block li,
.footer-block a,
.footer-block span,
.footer-block div {
font-size: 15px;
line-height: 1.7;
}
.footer-block p {
margin-bottom: 0;
}
.footer-block-media iframe,
.footer-block-media video,
.footer-block-media .wp-block-embed,
.footer-block-media .wp-video {
max-width: 100%;
}
.footer-bottom {
padding: 14px 0 18px;
}
.footer-bottom p {
font-size: 13px;
line-height: 1.7;
}
} @media (max-width: 480px) {
.footer-main {
padding: 22px 0 14px;
}
.footer-layout {
gap: 14px;
}
.footer-block h1,
.footer-block h2,
.footer-block h3,
.footer-block h4,
.footer-block h5,
.footer-block h6,
.footer-block .widget-title {
font-size: 12px;
margin-bottom: 10px;
}
.footer-block p,
.footer-block li,
.footer-block a,
.footer-block span,
.footer-block div {
font-size: 14px;
line-height: 1.65;
}
.footer-block-center .social-icons,
.footer-block-center .footer-social,
.footer-block-center .wp-block-social-links {
gap: 10px;
}
.footer-bottom {
padding: 12px 0 16px;
}
.footer-bottom p {
font-size: 12.5px;
line-height: 1.65;
}
.footer-bottom a {
display: inline-block;
margin-top: 2px;
}
} @media (max-width: 360px) {
.footer-main {
padding: 20px 0 12px;
}
.footer-layout {
gap: 12px;
}
.footer-block p,
.footer-block li,
.footer-block a,
.footer-block span,
.footer-block div {
font-size: 13px;
line-height: 1.6;
}
.footer-bottom p {
font-size: 12px;
line-height: 1.55;
}
}  @media (max-width: 1024px) {
section {
padding: 100px 0;
}
.container {
padding: 0 24px;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 82px;
gap: 24px;
}
.logo {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
flex-shrink: 0;
}
.logo img {
height: 58px;
width: auto;
display: block;
}
.main-nav {
display: flex;
align-items: center;
margin-left: auto;
}
.main-nav > ul {
gap: 22px;
}
.main-nav a {
font-size: 15px;
}
.menu-toggle {
display: none !important;
}
.hero {
gap: 40px;
}
.hero h1 {
font-size: 46px;
}
.hero-image-wrapper {
width: 360px;
height: 460px;
}
.capabilities-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-info-grid {
grid-template-columns: repeat(2, 1fr);
}
.single-creative_post .site-header {
display: block;
}
.post-content .pss-share-wrap {
margin-top: 38px;
margin-bottom: 38px;
}
} @media (max-width: 900px) {
.nav-container {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.logo {
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
flex-shrink: 0;
}
.logo img {
height: 60px;
width: auto;
display: block;
}
.menu-toggle {
display: flex !important;
align-items: center;
justify-content: center;
margin-left: auto;
margin-right: 0;
flex-shrink: 0;
}
.main-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #0b1118;
border-top: 1px solid rgba(255,255,255,0.06);
padding: 18px 20px 22px;
display: none !important;
flex-direction: column;
align-items: flex-start;
box-shadow: 0 18px 30px rgba(0,0,0,0.35);
z-index: 1000;
}
.main-nav.active {
display: flex !important;
}
.main-nav ul {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.main-nav li {
width: 100%;
position: relative;
}
.main-nav > ul > li > a {
display: block;
width: 100%;
font-size: 16px;
line-height: 1.4;
}
.main-nav .sub-menu {
display: none;
position: static;
width: calc(100% - 10px);
margin-top: 10px;
margin-left: 6px;
padding: 10px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 16px;
box-shadow: 0 10px 24px rgba(0,0,0,0.22);
transform: none;
opacity: 1;
visibility: visible;
box-sizing: border-box;
}
.main-nav li.submenu-open > .sub-menu {
display: block;
}
.main-nav .sub-menu li {
width: 100%;
position: relative;
margin-bottom: 6px;
}
.main-nav .sub-menu li:last-child {
margin-bottom: 0;
}
.main-nav .sub-menu a {
display: block;
width: 100%;
padding: 12px 16px;
color: #dbe7f5;
line-height: 1.5;
font-size: 15px;
border-radius: 12px;
transition: background .2s ease, color .2s ease;
box-sizing: border-box;
}
.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus {
background: rgba(58, 134, 255, 0.08);
color: #ffffff;
}
.main-nav .sub-menu .sub-menu {
display: none;
position: static;
width: calc(100% - 12px);
margin-top: 10px;
margin-left: 10px;
padding: 10px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.045);
border-radius: 14px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
box-sizing: border-box;
}
.main-nav .sub-menu li.submenu-open > .sub-menu {
display: block;
}
.main-nav .sub-menu .sub-menu a {
border-radius: 12px;
}
.main-nav li.has-mobile-submenu {
position: relative;
}
.main-nav li.has-mobile-submenu > a {
display: block;
width: 100%;
padding-right: 44px;
box-sizing: border-box;
}
.submenu-toggle {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
cursor: pointer;
padding: 0;
}
.submenu-toggle span {
display: block;
width: 10px;
height: 10px;
border-right: 2px solid rgba(255,255,255,0.88);
border-bottom: 2px solid rgba(255,255,255,0.88);
transform: rotate(45deg);
transition: transform 0.25s ease;
opacity: 0.9;
}
.main-nav li.submenu-open > .submenu-toggle span {
transform: rotate(-135deg);
}
.hero {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.hero-description {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.hero-image {
order: -1;
}
.hero-image-wrapper {
width: min(100%, 360px);
height: 440px;
}
.blog-grid,
.testimonials-grid,
.related-grid,
.form-row.three-col {
grid-template-columns: 1fr;
}
.career-list {
padding-left: 28px;
margin-top: 50px;
}
.career-details {
margin-left: 28px;
}
.home main,
.blog main,
.archive main,
.single-post main,
.page main,
.post-type-archive-creative_post main,
.single-creative_post main,
.blog-page {
padding-top: 110px;
}
.post-content .pss-share-wrap {
margin-top: 34px;
margin-bottom: 36px;
}
} @media (max-width: 768px) {
section {
padding: 80px 0;
}
.container {
padding: 0 18px;
}
#about {
padding-top: 120px;
padding-bottom: 80px;
}
.logo img {
height: 56px;
}
.hero-label,
.hero-tagline {
font-size: 11px;
letter-spacing: 1px;
}
.hero h1 {
font-size: 42px;
line-height: 1.08;
}
.hero h3 {
font-size: 18px;
}
.hero-description {
font-size: 15px;
line-height: 1.8;
}
.hero-buttons {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.btn-primary,
.btn-secondary {
width: 100%;
text-align: center;
box-sizing: border-box;
}
.hero-image-wrapper {
width: min(100%, 320px);
height: 400px;
}
.career-list::before {
left: 8px;
}
.career-marker {
left: -5px;
width: 12px;
height: 12px;
}
.career-details {
margin-left: 24px;
}
.career-item {
margin-bottom: 44px;
}
.capabilities-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.capability-item {
padding: 26px;
}
.testimonial-bubble {
padding: 24px 22px 30px;
}
.testimonial-footer {
margin-left: 14px;
}
.testimonial-avatar {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
margin-right: 14px;
}
.testimonial-name {
font-size: 15px;
}
.testimonial-role {
font-size: 12px;
}
.blog-content {
padding: 18px;
}
.post-title {
font-size: 34px;
line-height: 1.18;
}
.post-featured-image img {
height: 260px;
}
.post-content {
font-size: 16px;
line-height: 1.85;
}
.post-meta {
flex-wrap: wrap;
gap: 6px;
}
.blog-search-form {
flex-direction: column;
}
.blog-search-form button,
.contact-form button {
width: 100%;
}
.contact-info-grid {
grid-template-columns: 1fr;
}
.contact-info-card {
padding: 24px 18px;
}
.post-navigation {
flex-direction: column;
align-items: flex-start;
}
.home main,
.blog main,
.archive main,
.single-post main,
.page main,
.post-type-archive-creative_post main,
.single-creative_post main,
.blog-page {
padding-top: 110px;
padding-left: 0;
padding-right: 0;
padding-bottom: 50px;
}
.comments-cta-card {
flex-direction: column;
align-items: flex-start;
padding: 24px 22px;
}
.comments-open-btn,
.comment-submit-btn,
.comment-form input[type="submit"],
.comment-form .submit {
width: 100%;
text-align: center;
}
.comments-title,
.comment-reply-title,
.comments-cta-title {
font-size: 24px;
}
.comment-respond {
padding: 24px 20px;
border-radius: 14px;
}
.comment-body {
padding: 22px 18px;
border-radius: 14px;
}
.comment-author {
gap: 12px;
}
.comment-author .avatar,
.comment-author img {
width: 48px;
height: 48px;
}
.comment-list > li > .children {
margin-left: 12px;
padding-left: 12px;
}
.children .children {
margin-left: 10px;
padding-left: 10px;
}
.bypostauthor > .comment-body::before {
top: 14px;
right: 14px;
font-size: 11px;
padding: 5px 9px;
}
#cancel-comment-reply-link {
margin-left: 0;
}
.comment-list #respond {
margin-left: 12px;
padding-left: 12px;
}
.comment-list #respond .comment-form {
padding: 18px;
}
.comment-list #respond .comment-reply-title {
font-size: 20px;
}
.page-template-default .page-entry {
padding: 0;
}
.page-title {
font-size: 32px;
}
.page-content {
font-size: 17px;
line-height: 1.8;
}
.post-content .pss-share-wrap {
margin-top: 30px;
margin-bottom: 34px;
}
} @media (max-width: 480px) {
.container {
padding: 0 16px;
}
.nav-container {
min-height: 72px;
padding: 10px 0;
}
.logo img {
height: 50px;
}
.main-nav {
padding: 16px 16px 20px;
}
.main-nav a {
font-size: 15px;
}
.hero h1 {
font-size: 34px;
line-height: 1.08;
}
.hero h3 {
font-size: 16px;
}
.hero-description {
font-size: 14px;
}
.hero-image-wrapper {
width: min(100%, 280px);
height: 350px;
border-radius: 16px;
}
.capability-item {
padding: 22px;
}
.capability-title {
font-size: 18px;
}
.testimonial-bubble {
padding: 22px 18px 28px;
font-size: 15px;
}
.testimonial-footer {
margin-left: 10px;
}
.testimonial-avatar {
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
}
.testimonial-name {
font-size: 14px;
}
.testimonial-role {
font-size: 11px;
}
.post-title {
font-size: 28px;
}
.post-featured-image img {
height: 220px;
}
.post-content {
font-size: 15px;
line-height: 1.85;
}
.contact-info-card {
border-radius: 14px;
}
.home main,
.blog main,
.archive main,
.single-post main,
.page main,
.post-type-archive-creative_post main,
.single-creative_post main,
.blog-page {
padding-bottom: 40px;
}
.post-content .pss-share-wrap {
margin-top: 26px;
margin-bottom: 30px;
}
} @media (max-width: 360px) {
.container {
padding: 0 14px;
}
.logo img {
height: 46px;
}
.menu-toggle span {
width: 24px;
}
.hero h1 {
font-size: 30px;
}
.hero h3 {
font-size: 15px;
}
.hero-description {
font-size: 13.5px;
line-height: 1.8;
}
.hero-image-wrapper {
width: min(100%, 250px);
height: 320px;
}
.post-title {
font-size: 24px;
}
.post-content {
font-size: 14.5px;
}
.post-content .pss-share-wrap {
margin-top: 22px;
margin-bottom: 26px;
}
}