.elementor-4353 .elementor-element.elementor-element-2618cf2b{padding:50px 0px 0px 0px;}.elementor-4353 .elementor-element.elementor-element-3c88a154{padding:50px 0px 50px 0px;}.elementor-4353 .elementor-element.elementor-element-b7483de.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-4353 .elementor-element.elementor-element-4df666f7{width:initial;max-width:initial;padding:0px 0px 0px 0px;font-family:"Space Grotesk", Sans-serif;font-size:40px;font-weight:400;line-height:1.2em;color:var( --e-global-color-primary );}.elementor-4353 .elementor-element.elementor-element-4df666f7 p{margin-block-end:0px;}.elementor-4353 .elementor-element.elementor-element-6b33c12f{padding:50px 0px 50px 0px;}@media(max-width:1024px){.elementor-4353 .elementor-element.elementor-element-4df666f7{padding:0px 0px 0px 0px;font-size:16px;}}@media(max-width:480px){.elementor-4353 .elementor-element.elementor-element-3c88a154{padding:50px 0px 0px 0px;}.elementor-4353 .elementor-element.elementor-element-4df666f7{padding:0px 0px 0px 0px;font-size:24px;}}/* Start custom CSS for shortcode, class: .elementor-element-302fd23 */@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap');

.portfolio-container {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  font-family: 'Space Grotesk', sans-serif;
  box-sizing: border-box;
}

/* Sidebar Styling */
.portfolio-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 40px;
  height: fit-content;
}

.portfolio-filters {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-btn {
    text-decoration: none;
    font-size: 24px;
    font-weight: 500;
    color: #616161;
    transition: color 0.3s ease;
}

.filter-btn.active {
 color: #316EEC;
}

.filter-btn:hover {
 color: #000;
}

/* Main Grid Layout */
.portfolio-grid {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Base Portfolio Row Structure */
.portfolio-item {
  display: flex;
  align-items: stretch;
  gap: 10px;
  justify-content: center;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.portfolio-item.hidden {
  display: none;
}

/* Card & Media Sizing */
.portfolio-item .portfolio-card {
  width: 27%;
  flex-shrink: 0;
}

.portfolio-item .portfolio-media {
  width: 70%;
  flex-shrink: 0;
}

/* Dynamic Zig-Zag Rule: Flips layout on even items */
.portfolio-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* Info Card Styling */
.portfolio-card {
  background-color: #cbe4ff;
      font-family: "Space Grotesk", Sans-serif;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  box-sizing: border-box;
}

.card-number {
  font-size: 20px;
  font-weight: 700;
  color: #23255c;
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  color: #23255c;
      font-family: "Space Grotesk", Sans-serif;
  margin: 0 0 8px 0;
}

.card-category {
  font-size: 16px;
  color: #555555;
  margin: 0;
}

/* Parallax Container Mask */
.portfolio-media {
border-radius: 20px !important;
  overflow: hidden !important;
  position: relative;
  min-height: 100%;
  
  /* Hardware-level masking (Fixes WebKit/Chromium GPU bleed) */
  clip-path: inset(0 round 20px);
  -webkit-clip-path: inset(0 round 20px);
  isolation: isolate;
  transform: translateZ(0);
}

.parallax-wrapper {
width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden !important;
  border-radius: 20px;
}

.parallax-img {
width: 100%;
  height: 380px !important; /* Provides extra height required for Y-axis motion */
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  /* DO NOT set border-radius on the img itself */
  border-radius: 0 !important; 
  will-change: transform;
  transition: transform 1s cubic-bezier(0.1, 0.2, 0.1, 1);
}

.card-title a.portfolio-link {
  color: #23255c;
  text-decoration: none;
  transition: color 0.3s ease;
}

.card-title a.portfolio-link:hover {
  color: #23255c; /* Accent color on hover */
}

.portfolio-media-link {
display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border-radius: inherit;
  overflow: hidden !important;
}

/* Mobile & Tablet Responsive Rules */
@media (max-width: 992px) {
  .portfolio-container {
    flex-direction: column;
    gap: 20px;
  }

  .portfolio-sidebar {
    width: 100%;
    position: static;
  }

  .portfolio-filters {
    flex-wrap: wrap;
    gap: 12px;
  }

  .portfolio-item,
  .portfolio-item:nth-child(even) {
    flex-direction: column;
  }

  .portfolio-item .portfolio-card,
  .portfolio-item .portfolio-media {
    width: 100%;
  }

  .portfolio-card {
    min-height: 200px;
  }
  
  .portfolio-item .portfolio-media {
    height: 300px;
}

.portfolio-item .portfolio-card {    height: 300px;
    flex-shrink: 0;
}
}

/* Hide standard cursor inside right grid */
#portfolioGrid,
#portfolioGrid * {
  cursor: none !important;
}

/* Floating View Badge attached to body */
body > .portfolio-custom-cursor {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 90px !important;
  height: 90px !important;
  
  /* Glassmorphism Styling */
  background-color: rgba(139, 179, 255, 0.65) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  
  color: #ffffff !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  border-radius: 50% !important;
  
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important; /* Critical: lets clicks pass through */
  z-index: 9999999 !important; /* Sits above all Elementor templates */
  
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.2s ease;
}

/* Active State */
body > .portfolio-custom-cursor.is-active {
  opacity: 1 !important;
}/* End custom CSS */