/* GPA Theme Custom Styles - Work Items */

/* Note: This file uses theme color variables from Appearance > Customize > Colors
   Variables are defined in functions.php and include:
   --gpa-link-color, --gpa-accent-color, --gpa-link-rgb, --gpa-accent-rgb, --gpa-primary-dark, --gpa-text-light */

/* ========================================================================
   Global Navigation Styling
   ======================================================================== */

   .genesis-nav-menu .menu-item a,
   .nav-primary .genesis-nav-menu a,
   .nav-secondary .genesis-nav-menu a,
   .menu-toggle,
   .sub-menu-toggle {
       color: var(--gpa-text-light);
   }
   
   .genesis-nav-menu a:hover,
   .genesis-nav-menu a:focus,
   .nav-primary .genesis-nav-menu a:hover,
   .nav-primary .genesis-nav-menu a:focus,
   .genesis-nav-menu .current-menu-item > a,
   .menu-toggle:hover,
   .menu-toggle:focus,
   .sub-menu-toggle:hover,
   .sub-menu-toggle:focus {
       color: var(--gpa-accent-color);
   }
   
   /* Sub-menu styling */
   .genesis-nav-menu .sub-menu a {
       background-color: var(--gpa-primary-dark) !important;
       color: var(--gpa-text-light) !important;
       border-color: rgba(var(--gpa-accent-rgb), 0.2) !important;
   }
   
   .genesis-nav-menu .sub-menu a:hover,
   .genesis-nav-menu .sub-menu a:focus {
       background-color: var(--gpa-accent-color) !important;
       color: var(--gpa-text-light) !important;
   }
   
   /* Mobile menu styling */
   .menu-toggle {
       background-color: var(--gpa-accent-color) !important;
   }
   
   .menu-toggle:hover,
   .menu-toggle:focus {
       background-color: var(--gpa-accent-color) !important;
       color: var(--gpa-text-light) !important;
   }
   
   /* Site title and description */
   .site-title a {
       color: var(--gpa-text-light) !important;
   }
   
   .site-description {
       color: var(--gpa-text-light-secondary) !important;
   }
   
   /* ========================================================================
      Service Items Global Styling
      ======================================================================== */
   
   .service-item {
       background: var(--gpa-primary-dark) !important;
       border: 1px solid rgba(var(--gpa-link-rgb), 0.3) !important;
   }
   
   .service-item::before {
       background: linear-gradient(90deg, var(--gpa-accent-color), var(--gpa-accent-color)) !important;
   }
   
   .service-item:hover {
       box-shadow: 0 25px 50px rgba(var(--gpa-link-rgb), 0.25) !important;
       background: var(--gpa-primary-dark) !important;
   }
   
   .service-icon {
       color: var(--gpa-accent-color) !important;
   }
   
   .service-item:hover .service-icon {
       color: var(--gpa-accent-color) !important;
   }
   
   .service-title,
   .front-page-services .service-item .service-title {
       color: var(--gpa-text-light) !important;
   }
   
   .service-description {
       color: var(--gpa-text-light-secondary) !important;
   }
   
   .service-features li {
       color: var(--gpa-text-light-tertiary) !important;
   }
   
   .service-features li i {
       color: var(--gpa-accent-color) !important;
   }
   
   .service-cta {
       background: linear-gradient(135deg, var(--gpa-accent-color), var(--gpa-accent-color)) !important;
   }
   
   .service-cta:hover {
       box-shadow: 0 8px 25px rgba(var(--gpa-accent-rgb), 0.4) !important;
   }
   
   /* ========================================================================
      Profile Section Styles
      ======================================================================== */
   .profile-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 50%;
   }
   
   .profile-subtitle {
       text-align: center;
       margin-top: 20px;
       font-size: 1.1em;
       color: var(--gpa-accent-color);
       font-weight: 500;
       margin-bottom: 0;
   }
   
   /* Featured Work Grid */
   .featured-work-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 40px;
       margin-top: 60px;
   }
   
   /* Work Item Styles */
   .work-item {
       background: #fff;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(var(--gpa-link-rgb), 0.1);
       transition: all 0.4s ease;
       border: 1px solid rgba(var(--gpa-link-rgb), 0.05);
       display: flex;
       flex-direction: column;
       height: 100%;
   }
   
   .work-item:hover {
       transform: translateY(-10px);
       box-shadow: 0 25px 50px rgba(var(--gpa-link-rgb), 0.2);
   }
   
   /* Work Image Styles */
   .work-image {
       position: relative;
       overflow: hidden;
       height: 300px;
   }
   
   .work-image img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform 0.4s ease;
   }
   
   .work-item:hover .work-image img {
       transform: scale(1.05);
   }
   
   /* Work Overlay Styles */
   .work-overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(
           135deg,
           rgba(var(--gpa-link-rgb), 0.8) 0%,
           rgba(var(--gpa-accent-rgb), 0.8) 100%
       );
       opacity: 0;
       transition: all 0.4s ease;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       padding: 30px;
   }
   
   .work-item:hover .work-overlay {
       opacity: 1;
   }
   
   /* Work Category Styles */
   .work-category {
       background: rgba(255, 255, 255, 0.2);
       color: #fff;
       padding: 8px 16px;
       border-radius: 20px;
       font-size: 0.85em;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       align-self: flex-start;
       backdrop-filter: blur(10px);
   }
   
   /* Work Stats Styles */
   .work-stats {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   
   .work-stat {
       color: #fff;
       font-size: 0.9em;
       display: flex;
       align-items: center;
       background: rgba(255, 255, 255, 0.1);
       padding: 8px 12px;
       border-radius: 8px;
   }
   
   .stat-label {
       font-weight: 500;
   }
   
   .stat-value {
       font-size: 1.1em;
   }
   .work-content {
       background: var(--gpa-primary-dark) !important;
       color: var(--gpa-text-light) !important;
   }
   
   .work-title {
       color: var(--gpa-text-light) !important;
   }
   
   .work-client {
       color: var(--gpa-text-light-secondary) !important;
   }
   
   .work-description {
       color: var(--gpa-text-light-secondary) !important;
   }
   
   .work-link {
       color: var(--gpa-text-light) !important;
   }
   
   .work-link:hover {
       text-decoration: underline;
   }
   /* Work Content Styles */
   .work-content {
       padding: 30px;
       display: flex;
       flex-direction: column;
       flex: 1;
       background: var(--gpa-primary-dark) !important;
       color: var(--gpa-text-light) !important;
   }
   
   .work-title {
       font-size: 1.5em;
       color: var(--gpa-link-color);
       margin-bottom: 8px;
   }
   
   .work-client {
       color: var(--gpa-accent-color);
       font-size: 0.95em;
       margin-bottom: 15px;
       font-weight: 500;
   }
   
   .work-description {
       color: rgb(171, 177, 182);
       line-height: 1.6;
       margin-bottom: 20px;
       flex: 1;
   }
   a.work-link { display:inline-block; text-decoration: none; border:1px solid white; padding: 5px 15px; border-radius: 25px; }
   a.work-link:hover { text-decoration: none; }
   .work-link {
       color: var(--gpa-accent-color);
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       transition: all 0.3s ease;
       width: auto;
       max-width: max-content;
   }
   
   .work-link:hover {
       color: var(--gpa-link-color);
       transform: translateX(5px);
   }
   
   .work-link i {
       transition: transform 0.3s ease;
   }
   
   .work-link:hover i {
       transform: translateX(3px);
   }
   
   /* Archive Project Styles */
   .archive_site_content {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 40px;
       margin-top: 40px;
   }
   
   .project_item {
       background: #fff;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(var(--gpa-link-rgb), 0.1);
       transition: all 0.4s ease;
       border: 1px solid rgba(var(--gpa-link-rgb), 0.05);
   }
   
   .project_item:hover {
       transform: translateY(-10px);
       box-shadow: 0 25px 50px rgba(var(--gpa-link-rgb), 0.2);
   }
   
   .project_item a {
       display: block;
       text-decoration: none;
       color: inherit;
   }
   
   .project_item .logo_item_img {
       width: 100%;
       height: 300px;
       object-fit: cover;
       transition: transform 0.4s ease;
   }
   
   .project_item:hover .logo_item_img {
       transform: scale(1.05);
   }
   
   .project_item_content {
       padding: 30px;
   }
   
   .project_title {
       font-size: 1.5em;
       color: var(--gpa-link-color);
       margin-bottom: 8px;
   }
   
   .project_title span {
       color: inherit;
   }
   
   .project_item_content p {
       color: rgb(171, 177, 182);
       line-height: 1.6;
       margin-bottom: 20px;
   }
   
   .project_item_content .button {
       background: var(--gpa-accent-color);
       color: #fff;
       padding: 12px 24px;
       border-radius: 25px;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
   }
   
   .project_item_content .button:hover {
       background: var(--gpa-link-color);
       transform: translateY(-2px);
   }
   
   /* Content Sample Slider Styles */
   .front-page-content-sample-slider {
       background: rgba(var(--gpa-accent-rgb), 0.02);
       border-top: 1px solid rgba(var(--gpa-link-rgb), 0.1);
   }
   
   .front-page-content-sample-slider .wrap {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   .content-slider-layout {
       display: grid;
       grid-template-columns: 1fr 2fr;
       gap: 60px;
       align-items: center;
       min-height: 650px;
   }
   
   .section-header-column {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100%;
   }
   
   .section-header-column .section-header {
       text-align: left;
       max-width: 400px;
   }
   
   .slider-column {
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100%;
   }
   
   .content-sample-swiper {
       width: 400px;
       height: 750px;
       margin: 0;
       position: relative;
       overflow: visible;
   }
   
   .content-sample-swiper .swiper-wrapper {
       align-items: center;
   }
   
   .content-sample-slide {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 100%;
       width: 320px; /* Fixed width for slidesPerView: 'auto' */
       opacity: 0.4;
       transform: scale(0.8);
       transition: all 0.4s ease;
   }
   
   .content-sample-slide.swiper-slide-active {
       opacity: 1;
       transform: scale(1);
   }
   
   .content-sample-slide.swiper-slide-next,
   .content-sample-slide.swiper-slide-prev {
       opacity: 0.6;
       transform: scale(0.9);
   }
   
   .slide-content {
       position: relative;
       width: 100%;
       max-width: 300px;
       height: 533px; /* 16:9 aspect ratio for phone format */
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 15px 35px rgba(var(--gpa-link-rgb), 0.2);
       transition: all 0.3s ease;
   }
   
   .slide-content:hover {
       transform: translateY(-5px);
       box-shadow: 0 20px 45px rgba(var(--gpa-link-rgb), 0.3);
   }
   
   .slide-image-container {
       width: 100%;
       height: 100%;
       position: relative;
       overflow: hidden;
   }
   
   .slide-image-container img {
       aspect-ratio: 16/9;
       object-fit: cover;
       transition: transform 0.4s ease;
       width: 100%;
       height: 100%;
   }
   
   .slide-content:hover .slide-image-container img {
       transform: scale(1.05);
   }
   
   .slide-overlay {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: linear-gradient(
           to top,
           rgba(0, 0, 0, 0.8) 0%,
           rgba(0, 0, 0, 0.4) 50%,
           transparent 100%
       );
       padding: 30px 20px 20px;
       transform: translateY(100%);
       transition: all 0.3s ease;
   }
   
   .slide-content:hover .slide-overlay {
       transform: translateY(0);
   }
   
   .slide-title {
       color: #fff;
       font-size: 1.2em;
       margin-bottom: 10px;
       line-height: 1.3;
   }
   
   .slide-link {
       color: var(--gpa-accent-color);
       background: rgba(255, 255, 255, 0.9);
       padding: 8px 16px;
       border-radius: 20px;
       text-decoration: none;
       font-weight: 500;
       font-size: 0.9em;
       display: inline-block;
       transition: all 0.3s ease;
   }
   
   .slide-link:hover {
       background: #fff;
       color: var(--gpa-link-color);
       transform: translateY(-2px);
   }
   
   /* Swiper Navigation Styles */
   .content-sample-swiper .swiper-button-next,
   .content-sample-swiper .swiper-button-prev {
       color: var(--gpa-accent-color);
       background: rgba(255, 255, 255, 0.9);
       width: 50px;
       height: 50px;
       border-radius: 50%;
       box-shadow: 0 5px 15px rgba(var(--gpa-link-rgb), 0.2);
       transition: all 0.3s ease;
   }
   
   .content-sample-swiper .swiper-button-next:hover,
   .content-sample-swiper .swiper-button-prev:hover {
       color: var(--gpa-link-color);
       transform: scale(1.1);
       box-shadow: 0 8px 25px rgba(var(--gpa-link-rgb), 0.3);
   }
   
   .content-sample-swiper .swiper-button-next::after,
   .content-sample-swiper .swiper-button-prev::after {
       font-size: 18px;
   }
   
   /* Swiper Pagination Styles */
   .content-sample-swiper .swiper-pagination {
       bottom: -50px;
   }
   
   .content-sample-swiper .swiper-pagination-bullet {
       background: var(--gpa-accent-color);
       opacity: 0.3;
       width: 12px;
       height: 12px;
       margin: 0 6px;
       transition: all 0.3s ease;
   }
   
   .content-sample-swiper .swiper-pagination-bullet-active {
       opacity: 1;
       background: var(--gpa-link-color);
       transform: scale(1.2);
   }
   
   .no-content-samples {
       text-align: center;
       padding: 60px 20px;
       background: #fff;
       border-radius: 16px;
       box-shadow: 0 10px 30px rgba(var(--gpa-link-rgb), 0.1);
       margin-top: 60px;
   }
   
   .no-content-samples p {
       color: var(--gpa-accent-color);
       font-size: 1.1em;
       margin: 0;
   }
   
   /* Content Sample Filter Styles */
   .content-sample-filter-container {
       background: #fff;
       border-bottom: 1px solid rgba(var(--gpa-link-rgb), 0.1);
       padding: 30px 0;
       margin-bottom: 0;
   }
   
   .content-sample-filters {
       display: flex;
       flex-wrap: wrap;
       gap: 15px;
       justify-content: center;
       align-items: center;
   }
   
   .filter-btn {
       background: rgba(var(--gpa-accent-rgb), 0.05);
       color: var(--gpa-link-color);
       border: 2px solid rgba(var(--gpa-link-rgb), 0.1);
       padding: 12px 24px;
       border-radius: 25px;
       font-size: 0.95em;
       cursor: pointer;
       transition: all 0.3s ease;
       text-transform: capitalize;
       letter-spacing: 0.5px;
       position: relative;
       overflow: hidden;
   }
   
   .filter-btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
       transition: left 0.5s ease;
   }
   
   .filter-btn:hover::before {
       left: 100%;
   }
   
   .filter-btn:hover {
       background: rgba(var(--gpa-accent-rgb), 0.1);
       color: var(--gpa-accent-color);
   }
   
   .filter-btn.active {
       background: linear-gradient(135deg, var(--gpa-link-color), var(--gpa-accent-color));
       color: #fff;
       border-color: var(--gpa-accent-color);
   }
   
   
   /* Archive Container positioning for loading overlay */
   .archive-content-sample-container {
       position: relative;
       min-height: 400px;
   }
   
   /* Content Loading Overlay - positioned over grid */
   .content-sample-loading-overlay {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(8px);
       z-index: 100;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                   visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       border-radius: 12px;
   }
   
   .content-sample-loading-overlay.active {
       opacity: 1;
       visibility: visible;
   }
   
   .loading-spinner {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 24px;
       animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   @keyframes fadeInScale {
       from {
           opacity: 0;
           transform: scale(0.9);
       }
       to {
           opacity: 1;
           transform: scale(1);
       }
   }
   
   .spinner-circle {
       width: 60px;
       height: 60px;
       border: 4px solid rgba(var(--gpa-accent-rgb), 0.15);
       border-top: 4px solid var(--gpa-accent-color);
       border-radius: 50%;
       animation: spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
       box-shadow: 0 4px 20px rgba(var(--gpa-accent-rgb), 0.2);
   }
   
   @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
   }
   
   .loading-text {
       color: var(--gpa-primary-dark);
       font-size: 1.1em;
       text-align: center;
       letter-spacing: 0.5px;
   }
   
   /* Fade out grid items when loading */
   .archive-content-sample-container.loading .content-sample-archive-grid {
       opacity: 0.3;
       transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       pointer-events: none;
   }
   
   /* Smooth grid item transitions */
   .content-sample-archive-grid .content-sample-grid-item {
       transition: opacity 0.3s ease, transform 0.3s ease;
   }
   
   .archive-content-sample-container.loading .content-sample-grid-item {
       opacity: 0.5;
       transform: scale(0.98);
   }
   
   /* Old filter loading (keep for backwards compatibility) */
   .filter-loading {
       display: none;
   }
   
   @keyframes pulse {
       0%, 100% { opacity: 0.6; }
       50% { opacity: 1; }
   }
   
   /* Content Sample Archive Grid Styles */
   .archive-content-sample-container {
       padding: 30px 0;
       background: rgba(var(--gpa-accent-rgb), 0.02);
   }
   
   .archive-content-sample-container .wrap {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   .content-sample-archive-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 40px;
       justify-items: center;
   }
   
   .content-sample-grid-item {
       width: 300px;
   }
   
   .grid-item-link {
       display: block;
       text-decoration: none;
       color: inherit;
   }
   
   .content-sample-grid-item .slide-content {
       position: relative;
       width: 100%;
       height: 533px; /* 16:9 aspect ratio for phone format */
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 15px 35px rgba(var(--gpa-link-rgb), 0.2);
       transition: all 0.3s ease;
   }
   
   .content-sample-grid-item .slide-content:hover {
       transform: translateY(-5px);
       box-shadow: 0 20px 45px rgba(var(--gpa-link-rgb), 0.3);
   }
   
   .content-sample-grid-item .slide-image-container {
       width: 100%;
       height: 100%;
       position: relative;
       overflow: hidden;
   }
   
   .content-sample-grid-item .slide-image-container img {
       aspect-ratio: 16/9;
       object-fit: cover;
       transition: transform 0.4s ease;
       width: 100%;
       height: 100%;
   }
   
   .content-sample-grid-item .slide-content:hover .slide-image-container img {
       transform: scale(1.05);
   }
   
   .content-sample-grid-item .slide-overlay {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       background: linear-gradient(
           to top,
           rgba(0, 0, 0, 0.8) 0%,
           rgba(0, 0, 0, 0.4) 50%,
           transparent 100%
       );
       padding: 30px 20px 20px;
       transform: translateY(100%);
       transition: all 0.3s ease;
   }
   
   .content-sample-grid-item .slide-content:hover .slide-overlay {
       transform: translateY(0);
   }
   
   .content-sample-grid-item .slide-title {
       color: #fff;
       font-size: 1.2em;
       margin-bottom: 10px;
       line-height: 1.3;
   }
   
   .content-sample-grid-item .slide-link {
       color: var(--gpa-accent-color);
       background: rgba(255, 255, 255, 0.9);
       padding: 8px 16px;
       border-radius: 20px;
       text-decoration: none;
       font-weight: 500;
       font-size: 0.9em;
       display: inline-block;
       transition: all 0.3s ease;
   }
   
   .content-sample-grid-item .slide-content:hover .slide-link {
       background: #fff;
       color: var(--gpa-link-color);
       transform: translateY(-2px);
   }
   
   /* =====================================================
      Content Sample Pagination Styles
      ===================================================== */
   
   .content-sample-pagination {
       margin: 60px 0 40px;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   
   .content-sample-pagination .page-numbers {
       display: flex;
       flex-wrap: wrap;
       list-style: none;
       padding: 0;
       margin: 0;
       gap: 12px;
       align-items: center;
       justify-content: center;
   }
   
   .content-sample-pagination .page-numbers li {
       margin: 0;
       padding: 0;
   }
   
   .content-sample-pagination .page-numbers a,
   .content-sample-pagination .page-numbers span {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 50px;
       height: 50px;
       padding: 0 18px;
       background: rgba(255, 255, 255, 0.9);
       color: var(--gpa-link-color);
       border: 2px solid rgba(var(--gpa-link-rgb), 0.15);
       border-radius: 12px;
       text-decoration: none;
       font-weight: 600;
       font-size: 1em;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
       box-shadow: 0 2px 8px rgba(var(--gpa-link-rgb), 0.08);
   }
   
   /* Shine effect on hover */
   .content-sample-pagination .page-numbers a::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
       transition: left 0.5s ease;
   }
   
   .content-sample-pagination .page-numbers a:hover::before {
       left: 100%;
   }
   
   .content-sample-pagination .page-numbers a:hover {
       background: rgba(var(--gpa-accent-rgb), 0.1);
       color: var(--gpa-accent-color);
       border-color: var(--gpa-accent-color);
       transform: translateY(-3px);
       box-shadow: 0 6px 20px rgba(var(--gpa-accent-rgb), 0.25);
   }
   
   /* Current page styling */
   .content-sample-pagination .page-numbers .current {
       background: linear-gradient(135deg, var(--gpa-link-color), var(--gpa-accent-color));
       color: #fff;
       border-color: var(--gpa-accent-color);
       box-shadow: 0 4px 15px rgba(var(--gpa-accent-rgb), 0.3);
       cursor: default;
       transform: scale(1.05);
   }
   
   /* Prev/Next button styling */
   .content-sample-pagination .page-numbers .prev,
   .content-sample-pagination .page-numbers .next {
       background: linear-gradient(135deg, rgba(var(--gpa-link-rgb), 0.05), rgba(var(--gpa-accent-rgb), 0.05));
       font-weight: 500;
       padding: 0 24px;
   }
   
   .content-sample-pagination .page-numbers .prev:hover,
   .content-sample-pagination .page-numbers .next:hover {
       background: linear-gradient(135deg, var(--gpa-accent-color), var(--gpa-link-color));
       color: #fff;
       border-color: var(--gpa-accent-color);
   }
   
   /* Dots separator */
   .content-sample-pagination .page-numbers .dots {
       background: transparent;
       border: none;
       color: var(--gpa-link-color);
       cursor: default;
       box-shadow: none;
       font-weight: 700;
       letter-spacing: 2px;
       min-width: 40px;
   }
   
   .content-sample-pagination .page-numbers .dots:hover {
       background: transparent;
       transform: none;
       box-shadow: none;
   }
   
   /* Responsive Pagination Styles */
   @media (max-width: 768px) {
       .content-sample-pagination {
           margin: 40px 0 30px;
       }
       
       .content-sample-pagination .page-numbers {
           gap: 8px;
       }
       
       .content-sample-pagination .page-numbers a,
       .content-sample-pagination .page-numbers span {
           min-width: 44px;
           height: 44px;
           padding: 0 14px;
           font-size: 0.95em;
           border-radius: 10px;
       }
       
       .content-sample-pagination .page-numbers .prev,
       .content-sample-pagination .page-numbers .next {
           padding: 0 18px;
       }
   }
   
   @media (max-width: 480px) {
       .content-sample-pagination {
           margin: 30px 0 20px;
       }
       
       .content-sample-pagination .page-numbers {
           gap: 6px;
       }
       
       .content-sample-pagination .page-numbers a,
       .content-sample-pagination .page-numbers span {
           min-width: 40px;
           height: 40px;
           padding: 0 12px;
           font-size: 0.9em;
           border-radius: 8px;
       }
       
       .content-sample-pagination .page-numbers .prev,
       .content-sample-pagination .page-numbers .next {
           padding: 0 14px;
           font-size: 0.85em;
       }
       
       /* Hide some page numbers on very small screens */
       .content-sample-pagination .page-numbers li:not(.current):not(.prev):not(.next):not(.dots) {
           display: none;
       }
       
       /* Show only current, prev, next, and a couple adjacent pages */
       .content-sample-pagination .page-numbers li.current,
       .content-sample-pagination .page-numbers li.prev,
       .content-sample-pagination .page-numbers li.next,
       .content-sample-pagination .page-numbers li.dots {
           display: block;
       }
   }
   
   /* Content Sample Single Page Layout */
   .content-sample-single .content-sample-single-layout {
       display: grid;
       grid-template-columns: 400px 1fr;
       gap: 60px;
       align-items: start;
       margin: 20px 0;
   }
   
   .content-sample-single .content-sample-single-image {
       float:left;
       margin-right: 30px;
       width: 100%;
       max-width: 140px;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 15px 35px rgba(var(--gpa-link-rgb), 0.2);
       transition: all 0.3s ease;
   }

   .content-sample-single .content-sample-single-image img {
       width: 100%;
       height: auto;
       object-fit: cover;
       transition: transform 0.4s ease;
   }
   
   .content-sample-single .content-sample-single-content {
       flex: 1;
       min-width: 0; /* Prevents content from overflowing */
   }
   
   .content-sample-single .content-sample-single-content .entry-content {
       margin: 0;
   }
   
   /* Responsive Design */
   @media (max-width: 1024px) {
       .featured-work-grid,
       .archive_site_content {
           grid-template-columns: repeat(2, 1fr);
           gap: 30px;
       }
       
       .work-image,
       .project_item .logo_item_img {
           height: 250px;
       }
       
       .content-slider-layout {
           grid-template-columns: 1fr;
           gap: 40px;
           min-height: auto;
           text-align: center;
       }
       
       .section-header-column .section-header {
           text-align: center;
           max-width: none;
       }
       
       .content-sample-swiper {
           width: 100%;
           height: 500px;
           max-width: 400px;
           margin: 0 auto;
       }
       
       .content-sample-slide {
           width: 270px;
       }
       
       .slide-content {
           max-width: 250px;
           height: 444px; /* Maintain 16:9 ratio */
       }
       
       .content-sample-archive-grid {
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
           gap: 30px;
       }
       
       .content-sample-grid-item {
           width: 250px;
       }
       
       .content-sample-grid-item .slide-content {
           height: 444px;
       }
       
       /* Content Sample Single Responsive */
       .content-sample-single .content-sample-single-layout {
           grid-template-columns: 350px 1fr;
           gap: 40px;
           margin: 30px 0;
       }
       /* Filter Responsive - Tablet */
       .content-sample-filters {
           gap: 12px;
       }
       
       .filter-btn {
           padding: 10px 20px;
           font-size: 0.9em;
       }
   }
   
   @media (max-width: 768px) {
       .featured-work-grid,
       .archive_site_content {
           grid-template-columns: 1fr;
           gap: 30px;
       }
       
       .work-image,
       .project_item .logo_item_img {
           height: 250px;
       }
       
       .work-content,
       .project_item_content {
           padding: 25px;
       }
       
       .work-title,
       .project_title {
           font-size: 1.3em;
       }
       
       .front-page-content-sample-slider {
           padding:15px 0;
       }
       
       .content-slider-layout {
           gap: 30px;
       }
       
       .content-sample-swiper {
           height: 450px;
           max-width: 300px;
       }
       
       .content-sample-slide {
           width: 240px;
       }
       
       .slide-content {
           max-width: 220px;
           height: 391px; /* Maintain 16:9 ratio */
       }
       
       .archive-content-sample-container {
           padding: 60px 0;
       }
       
       .content-sample-archive-grid {
           grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
           gap: 25px;
       }
       
       .content-sample-grid-item {
           width: 220px;
       }
       
       .content-sample-grid-item .slide-content {
           height: 391px;
       }
       
       .content-sample-swiper .swiper-button-next,
       .content-sample-swiper .swiper-button-prev {
           width: 40px;
           height: 40px;
       }
       
       .content-sample-swiper .swiper-button-next::after,
       .content-sample-swiper .swiper-button-prev::after {
           font-size: 14px;
       }
       
       /* Content Sample Single Responsive */
       .content-sample-single .content-sample-single-layout {
           grid-template-columns: 1fr;
           gap: 30px;
           margin: 20px 0;
       }
       
       .content-sample-single .content-sample-single-image {
           position: relative;
           top: auto;
           max-width:90px;
           margin: 0px 20px 0 0;
       }
       
       /* Filter Responsive - Mobile */
       .content-sample-filter-container {
           padding: 20px 0;
       }
       
       .content-sample-filters {
           gap: 10px;
           justify-content: center;
       }
       
       .filter-btn {
           padding: 8px 16px;
           font-size: 0.85em;
           border-radius: 20px;
       }
   }
   
   @media (max-width: 480px) {
       .work-image,
       .project_item .logo_item_img {
           height: 200px;
       }
       
       .work-content,
       .project_item_content {
           padding: 20px;
       }
       
       .work-title,
       .project_title {
           font-size: 1.3em;
       }
       
       .front-page-content-sample-slider {
           padding: 40px 0;
       }
       
       .content-slider-layout {
           gap: 20px;
       }
       
       .content-sample-swiper {
           height: 400px;
           max-width: 250px;
       }
       
       .content-sample-slide {
           width: 220px;
       }
       
       .slide-content {
           max-width: 200px;
           height: 356px; /* Maintain 16:9 ratio */
       }
       
       .archive-content-sample-container {
           padding: 40px 0;
       }
       
       .content-sample-archive-grid {
           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
           gap: 20px;
       }
       
       .content-sample-grid-item {
           width: 200px;
       }
       
       .content-sample-grid-item .slide-content {
           height: 356px;
       }
       
       .content-sample-grid-item .slide-title {
           font-size: 1em;
       }
       
       .content-sample-grid-item .slide-link {
           font-size: 0.8em;
           padding: 6px 12px;
       }
       
       .slide-title {
           font-size: 1em;
       }
       
       .slide-link {
           font-size: 0.8em;
           padding: 6px 12px;
       }
       
       /* Content Sample Single Mobile */
       .content-sample-single .content-sample-single-layout {
           gap: 20px;
           margin: 15px 0;
       }
       
       /* Filter Responsive - Small Mobile */
       .content-sample-filter-container {
           padding: 15px 0;
       }
       
       .content-sample-filters {
           gap: 8px;
       }
       
       .filter-btn {
           padding: 6px 14px;
           font-size: 0.8em;
           min-width: auto;
       }
       
       .spinner-circle {
           width: 50px;
           height: 50px;
           border-width: 3px;
       }
       
       .loading-text {
           font-size: 1em;
       }
       
       .loading-spinner {
           gap: 16px;
       }
   }
   
   /* =====================================================
      Services Archive Styles
      ===================================================== */
   
   /* Services Archive Header */
   .services-archive-header {
       background: linear-gradient(135deg, var(--gpa-primary-dark) 0%, rgba(var(--gpa-link-rgb), 0.95) 100%);
       padding: 100px 0 80px;
       position: relative;
       overflow: hidden;
   }
   
   .services-archive-header::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: radial-gradient(circle at 20% 50%, rgba(var(--gpa-accent-rgb), 0.1) 0%, transparent 50%),
                   radial-gradient(circle at 80% 80%, rgba(var(--gpa-accent-rgb), 0.1) 0%, transparent 50%);
       pointer-events: none;
   }
   
   .services-archive-header .wrap {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
       position: relative;
       z-index: 1;
   }
   
   .services-archive-header .header-content {
       text-align: center;
       max-width: 800px;
       margin: 0 auto;
   }
   
   .services-archive-header .archive-title {
       font-size: 3.5em;
       color: #ffffff;
       margin: 0 0 25px;
       text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
       line-height: 1.2;
   }
   
   .services-archive-header .archive-description {
       font-size: 1.3em;
       line-height: 1.6;
       color: rgba(255, 255, 255, 0.9);
       margin: 0;
   }
   
   .services-archive-header .archive-description p {
       margin: 0;
       color: rgba(255, 255, 255, 0.9);
   }
   
   /* Services Archive Container */
   .services-archive-container, .archive-projects-container, .archive-case-study-container {
       background: rgba(var(--gpa-accent-rgb), 0.02);
   }
   
   .services-archive-container .wrap {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   /* Services Grid */
   .services-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 40px;
   }
   
   .service-item {
       background: var(--gpa-primary-dark);
       backdrop-filter: blur(10px);
       padding: 40px;
       border-radius: 20px;
       border: 1px solid rgba(var(--gpa-link-rgb), 0.3);
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
   }
   
   .service-item::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--gpa-accent-color), var(--gpa-accent-color));
   }
   
   .service-item:hover {
       transform: translateY(-10px);
       box-shadow: 0 25px 50px rgba(var(--gpa-link-rgb), 0.25);
       background: var(--gpa-primary-dark);
   }
   
   .service-icon {
       font-size: 3em;
       color: var(--gpa-accent-color);
       margin-bottom: 25px;
       transition: all 0.3s ease;
   }
   
   .service-item:hover .service-icon {
       color: var(--gpa-accent-color);
   }
   
   .service-title {
       font-size: 1.5em;
       color: #ffffff;
       margin-bottom: 15px;
       
   }
   
   .service-description {
       color: rgba(255, 255, 255, 0.8);
       line-height: 1.6;
       margin-bottom: 25px;
   }
   
   .service-description p {
       color: rgba(255, 255, 255, 0.8);
   }
   
   .service-description ul {
       list-style: none;
       padding: 0;
       margin: 20px 0;
   }
   
   .service-description ul li {
       position: relative;
       padding-left: 30px;
       margin-bottom: 10px;
       color: rgba(255, 255, 255, 0.7);
       font-size: 0.95em;
   }
   
   .service-description ul li::before {
       content: "✓";
       position: absolute;
       left: 0;
       top: 0;
       color: white;
       font-size: 1.2em;
   }
   
   .service-cta {
       background: linear-gradient(135deg, var(--gpa-accent-color), var(--gpa-accent-color));
       color: #fff;
       padding: 12px 24px;
       border-radius: 25px;
       text-decoration: none;
       display: inline-block;
       transition: all 0.3s ease;
       border: none;
       cursor: pointer;
   }
   
   .service-cta:hover {
       transform: translateY(-2px);
       box-shadow: 0 8px 25px rgba(var(--gpa-accent-rgb), 0.4);
       color: #fff;
   }
   
   /* No services message */
   .no-services {
       text-align: center;
       padding: 80px 20px;
       background: #fff;
       border-radius: 20px;
       box-shadow: 0 10px 30px rgba(var(--gpa-link-rgb), 0.1);
   }
   
   .no-services p {
       color: var(--gpa-accent-color);
       font-size: 1.2em;
       margin: 0;
   }
   
   /* Services Archive Responsive Styles */
   @media (max-width: 768px) {
       .services-archive-header {
           padding: 80px 0 60px;
       }
       
       .services-archive-header .archive-title {
           font-size: 2.5em;
       }
       
       .services-archive-header .archive-description {
           font-size: 1.1em;
       }
       
       .services-grid {
           grid-template-columns: 1fr;
           gap: 30px;
       }
       
       .service-item {
           padding: 30px;
       }
   }
   
   @media (max-width: 480px) {
       .services-archive-header {
           padding: 60px 0 40px;
       }
       
       .services-archive-header .archive-title {
           font-size: 2em;
       }
       
       .services-archive-header .archive-description {
           font-size: 1em;
       }
       
       .service-item {
           padding: 25px;
       }
       
       .service-icon {
           font-size: 2.5em;
       }
       
       .service-title {
           font-size: 1.3em;
       }
   }
   
   /* =====================================================
      Single Content Template
      ===================================================== */
   
      .single #breadcrumbs {
          max-width: 1048px;
          margin: 20px auto;
          width: 100%;
      }
      .single #breadcrumbs p {
          font-size: 14px;
      }

   .single-content {
       max-width: 1048px;
       margin: 0 auto;
       padding: 0 20px;
       width: 100%;
   }
   
   .content-highlight-single .single-content,
   .content-case-study-single .single-content {
       max-width: 1048px;
       margin: 0 auto;
       padding: 0 20px;
       width: 100%;
   }
   
   .featured-image {
       margin-bottom: 30px;
       text-align: center;
   }
   
   .featured-image img {
       max-width: 100%;
       height: auto;
       border-radius: 8px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   }
   
   /* =====================================================
      Stats Grid Centering
      ===================================================== */
   
   .stats-grid {
       display: flex;
       justify-content: center;
       align-items: center;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }
   
   /* =====================================================
      Back to Top Button
      ===================================================== */
   
   .back-to-top {
       position: fixed;
       bottom: 30px;
       right: 30px;
       width: 55px;
       height: 55px;
       background: linear-gradient(135deg, var(--gpa-accent-color), var(--gpa-link-color));
       color: var(--gpa-text-light);
       border: none;
       border-radius: 8px;
       cursor: pointer;
       font-size: 1.8em;
       line-height: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 4px 15px rgba(var(--gpa-accent-rgb), 0.4);
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 9999;
       opacity: 0;
       visibility: hidden;
       transform: translateY(20px) scale(0.8);
   }
   
   .back-to-top.visible {
       opacity: 1;
       visibility: visible;
       transform: translateY(0) scale(1);
   }
   
   .back-to-top:hover {
       transform: translateY(-5px) scale(1.05);
       box-shadow: 0 8px 25px rgba(var(--gpa-accent-rgb), 0.6);
       background: linear-gradient(135deg, var(--gpa-link-color), var(--gpa-accent-color));
   }
   
   .back-to-top:active {
       transform: translateY(-2px) scale(0.95);
   }
   
   .back-to-top:focus {
       outline: 3px solid rgba(var(--gpa-accent-rgb), 0.5);
       outline-offset: 3px;
   }
   
   .back-to-top-icon {
       pointer-events: none;
       display: block;
       line-height: 1;
       transition: transform 0.3s ease;
   }
   
   .back-to-top:hover .back-to-top-icon {
       transform: translateY(-3px);
   }
   
   /* Responsive adjustments */
   @media (max-width: 768px) {
       .back-to-top {
           bottom: 20px;
           right: 20px;
           width: 50px;
           height: 50px;
           font-size: 1.6em;
       }
   }
   
   @media (max-width: 480px) {
       .back-to-top {
           bottom: 15px;
           right: 15px;
           width: 45px;
           height: 45px;
           font-size: 1.4em;
       }
   }
   
   .genesis-nav-menu .digital_portfolio_link a {
       background: #fff;
       color: #323232; /* Fallback to dark blue if custom property is unset */
       border: 2px solid #fff;
       border-radius: 32px;
       padding: 0.5em 1.5em;
       box-shadow: 0 4px 14px rgba(0,0,0,0.05);
       transition: background 0.2s, color 0.2s, box-shadow 0.2s;
       display: inline-block;
       margin: 0 0.5em;
   }
   
   .digital_portfolio_link a:hover, 
   .digital_portfolio_link a:focus {
       color: #fff;
       text-decoration: none;
       border: 2px solid var(--gpa-primary-dark);
   }
   
   /* ========================================================================
      Home Intro Section
      ======================================================================== */
   
   .front-page-home-intro {
       position: relative;
       overflow: hidden;
       color: #333333; /* Dark text for no background */
   }
   
   .front-page-home-intro::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%);
       pointer-events: none;
   }
   
   .home-intro-content {
       position: relative;
       padding: 80px 40px;
       text-align: center;
       max-width: 1000px;
       margin: 0 auto;
   }
   
   .home-intro-heading {
       margin-bottom: 20px;
   }
   
   .home-intro-text {
       font-size: 1.2em;
       line-height: 1.7;
       opacity: 0.95;
       font-weight: 300;
   }
   
   .home-intro-text p {
       margin-bottom: 0;
   }
   
   /* Responsive Design */
   @media (max-width: 1024px) {
       .home-intro-content {
           padding: 60px 30px;
       }
       
       .home-intro-heading {
           font-size: 2.2em;
       }
       
       .home-intro-text {
           font-size: 1.1em;
       }
   }
   
   @media (max-width: 768px) {
       .home-intro-content {
           padding: 50px 25px;
       }
       
       .home-intro-heading {
           font-size: 1.8em;
       }
       
       .home-intro-text {
           font-size: 1em;
       }
   }
   
   @media (max-width: 480px) {
       .home-intro-content {
           padding: 40px 20px;
       }
       
       .home-intro-heading {
           font-size: 1.5em;
           margin-bottom: 15px;
       }
       
       .home-intro-text {
           font-size: 0.95em;
           line-height: 1.6;
       }
   }