:root {
     --gw-primary: #043038;
     --gw-accent: #eb5d07;
 }

 .hero-hybrid {
     min-height: 400px;
 }

 .infographic-full-img {
     max-width: 100%;
     height: auto;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
 }

 .embed-code-box {
     background: #0f172a;
     color: #e2e8f0;
     font-family: monospace;
     font-size: 0.85rem;
     padding: 16px;
     border-radius: 10px;
     resize: none;
     width: 100%;
 }

 .badge-category {
     display: inline-block;
     padding: 6px 16px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     background: rgba(235, 93, 7, 0.1);
     color: var(--gw-accent);
     border: 1px solid rgba(235, 93, 7, 0.25);
 }

 .infographic-modal-body {
     max-height: 85vh;
     overflow-y: auto;
     background: #f1f5f9;
     padding: 24px;
     text-align: center;
 }

 .infographic-modal-body img {
     max-width: 100%;
     height: auto;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     border-radius: 8px;
 }

 .infographic-card {
     border: 1px solid rgba(4, 48, 56, 0.1);
     border-radius: 16px;
     background: #ffffff;
     transition: all 0.35s ease;
     overflow: hidden;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .infographic-card:hover {
     transform: translateY(-6px);
     border-color: var(--gw-accent);
     box-shadow: 0 15px 35px rgba(235, 93, 7, 0.15);
 }

 .infographic-img-wrap {
     position: relative;
     height: 320px;
     overflow: hidden;
     background: #f8fafc;
     cursor: pointer;
 }

 .infographic-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top center;
     transition: transform 0.4s ease;
 }

 .infographic-card:hover .infographic-img-wrap img {
     transform: scale(1.03);
 }

 .infographic-overlay-btn {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(4, 48, 56, 0.65);
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease;
     backdrop-filter: blur(2px);
 }

 .infographic-img-wrap:hover .infographic-overlay-btn {
     opacity: 1;
 }

 .badge-category {
     display: inline-block;
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     background: rgba(235, 93, 7, 0.1);
     color: var(--gw-accent);
     border: 1px solid rgba(235, 93, 7, 0.25);
 }

 /* Modal Styles for Full Infographic Scroll */
 .infographic-modal-body {
     max-height: 80vh;
     overflow-y: auto;
     background: #f1f5f9;
     padding: 20px;
     text-align: center;
 }

 .infographic-modal-body img {
     max-width: 100%;
     height: auto;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     border-radius: 8px;
 }

 .page-link-custom {
     width: 42px;
     height: 42px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     border: 1px solid rgba(4, 48, 56, 0.15);
     color: var(--gw-primary);
     font-weight: 600;
     text-decoration: none;
     transition: all 0.25s ease;
 }

 .page-link-custom:hover,
 .page-link-custom.active {
     background: var(--gw-accent);
     color: #ffffff;
     border-color: var(--gw-accent);
 }