@import url("media-variable.css");
 
/* Media CSS */
@media all and (max-width: 1200px) {}
 
@media screen and (min-device-width: 768px) and (max-device-width: 1200px) { ul.color-palette li em { width: 100%; text-align: right; }
}
 
@media all and (max-width: 1024px) {
.tab-panel { padding: var(--size-12) var(--size-0); }
   
/* Large and Private Footer - Stack brand on top */
.global-footer-large .footer-main, .global-footer-private .footer-main { grid-template-columns: 1fr; gap: var(--spacing-8); }
   
/* Links columns - 3 columns on tablet */
.global-footer-large .footer-links-columns, .global-footer-private .footer-links-columns { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-6); }
}
 
@media screen and (min-width: 992px) and (max-width: 1024px) { .slick-dots { width: 45% !important; }
.arrows { justify-content: space-around; }
}
 
@media (min-width: 992px) { .offcanvas-lg .offcanvas-header { display: block; background-color: var(--popup-background-subtle); border-radius: 16px 16px 0px 0px; }
.offcanvas-lg .offcanvas-body { display: flex; flex-grow: 1; padding: 0; overflow-y: visible; background-color: var(--popup-background-subtle); }
.offcanvas-body .dropdown-menu { display: inline-block; width: 98%; padding: var(--spacing-0) var(--spacing-0); margin: 0; border-radius: 0px; border: 0px solid var(--popup-background-subtle); box-shadow: none; background-color: transparent; }
.offcanvas-footer { align-items: center; padding: var(--spacing-4) var(--spacing-4); border-top: 1px solid var(--surface-border-gray-muted); background-color: var(--popup-background-subtle); }
}
 
@media all and (max-width: 991px) { h1, .h1 { margin-bottom: var(--spacing-5); }
.component-wrapper .header-container { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; flex-direction: column; }
.i3_header .navbar-nav { align-items: center; justify-content: end; }
.res_header .navbar-nav .dropdown-menu { position: absolute; }
.i3_header .navbar { flex-wrap: wrap; }
.user_details.language { justify-content: flex-start; }
.vr.right_line { display: none; }
.mobile_menu i { color: var(--neutral-white-500); }
.mobile_menu a { text-decoration: none; }
.navbar-toggler.right_menu { padding: 4px; border-radius: var(--bradius-medium); }
.header-wrapper .header .i3_header { min-height: 44px; }
.navbar.res_header .i3_logo img { height: 20px; }
.navbar.res_header .public_logo img { height: 30px; }
.navbar.res_header .public_logo1 img { height: 9px; }
.header-wrapper .vr.left_line { margin: 0 2px; }
}

@media (max-width: 991px), (hover: none), (pointer: coarse), (any-pointer: coarse) {
  .i3_header .gh-user-menu .dropstart:hover > .gh-submenu { display: none !important; }
  .i3_header .gh-user-menu .dropstart:hover > .gh-pref-item .gh-caret-right { transform: rotate(90deg) !important; }
  .i3_header .gh-user-menu .dropstart.is-open > .gh-submenu { display: block !important; }
  .i3_header .gh-user-menu .dropstart.is-open > .gh-pref-item .gh-caret-right { transform: rotate(-90deg) !important; }
}
 
/* Tablet Small - 768px and below */
@media (max-width: 768px) { .footer-content { padding: 0 var(--spacing-6); }
/* Minimal Footer Mobile */
.global-footer-minimal .footer-content { flex-direction: column; align-items: flex-start; gap: var(--spacing-4); }
.global-footer-minimal .footer-logo { margin-bottom: var(--spacing-2); }
.global-footer-minimal .footer-copyright { text-align: left; }
.global-footer-minimal .footer-copyright span { display: block; }
   
/* Large and Private Footer - 2 columns for links */
.global-footer-large .footer-links-columns, .global-footer-private .footer-links-columns { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-6); }
.global-footer-large .footer-main, .global-footer-private .footer-main { gap: var(--spacing-6); }
 
/* Newsletter stays horizontal but adjusts */
.global-footer-large .footer-newsletter, .global-footer-private .footer-newsletter { flex-wrap: wrap; }
.global-footer-large .footer-newsletter .inputtext, .global-footer-private .footer-newsletter .inputtext { flex: 2; min-width: 200px; }
 
/* Logo group adjustments for mobile */
.global-footer-private .footer-logo-group { gap: var(--spacing-2); }
.global-footer-private .footer-logo img { height: 36px; }
.global-footer-private .footer-badge { width: 36px; height: 36px; }
}
 
@media all and (max-width: 767px) { .w-lg-49 { width: 100% !important; }
.f-width-container p { margin-right: var(--spacing-8); margin-bottom: var(--spacing-4); }
.f-width-container { display: flex; align-items: baseline; flex-direction: column; }
.modal_wrapper.modal.fade .modal-dialog { transform: translate3d(0, 0%, 0); transition: transform 0.5s ease-out; }
.modal_wrapper.modal.in .modal-dialog { transform: translate3d(0, 0, 0); }
.tab_wrapper ul { padding: 5px; }
.bar_margin { margin-top: 20px; }
.modal_res .modal_wrapper .modal-dialog { position: fixed; bottom: 0; margin: 0; width: 100%; max-width: 100%; }
.modal_sm .modal-content, .modal_md .modal-content, .modal_lg .modal-content { width: auto; }
.modal_wrapper { padding: 0; }
.modal_wrapper .modal-content { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.card.table_card { overflow-x: scroll; }
#sidebarCollapse span { display: none; }
.card_responsive { margin-top: 10px; }
.one-header-title, .vr.left_line.sm-hide { display: none;}
}
 
/* Mobile - 640px and below */
@media all and (max-width: 640px) { .footer-content { padding: 0 var(--spacing-5); }
 
/* Links columns - Single column on mobile */
.global-footer-large .footer-links-columns, .global-footer-private .footer-links-columns { grid-template-columns: 1fr; gap: var(--spacing-6); margin-top: var(--spacing-4); }
   
/* Ensure columns are visible */
.global-footer-large .footer-column, .global-footer-private .footer-column { width: 100%; }
   
/* Newsletter - Stack vertically */
.global-footer-large .footer-newsletter, .global-footer-private .footer-newsletter { flex-direction: column; align-items: stretch; gap: var(--spacing-3); }
.global-footer-large .footer-newsletter .inputtext, .global-footer-private .footer-newsletter .inputtext { flex: 1; width: 100%; }
.global-footer-large .footer-newsletter .btn, .global-footer-private .footer-newsletter .btn { width: 100%; }
   
/* Logo and badge sizing */
.global-footer-private .footer-logo img { height: 32px; }
.global-footer-private .footer-badge { width: 32px; height: 32px; }
   
/* Description text sizing */
.global-footer-large .footer-description, .global-footer-private .footer-description { font-size: var(--fz-size-12); line-height: var(--lineheight-18); }

.navbar-nav .nav-item.help-icon{ display: none;}
}
 
@media all and (max-width: 580px) { 
.header-wrapper .vr.left_line { margin: 0 2px; }
.header-wrapper.mobile_header .i3_header { width: 270px !important; }
.header-wrapper.mobile_header { display: none; }
.label_position .inputtext { display: block !important; }
.card-body.page_body { overflow-x: scroll; }
.header_button { display: block !important; }
.dropdown-menu { min-width: 240px; }
.content-view{ display: flex; align-items: flex-start; text-align: left; flex-wrap: wrap; }
.welcome .text_details { font-size: var(--fz-size-16); }
.hide_mobile{ display: none; }
.d-mobile{ width: 100% !important; padding-left: 0px !important; }
.page_wrapper{ overflow: auto; padding-bottom: 14px; }
.bs-stepper-label { padding-left: var(--spacing-0); }
.bs-stepper-header { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; overflow: auto; padding-bottom: 10px; }
.tab_wrapper ul { padding: 0px; }

}
 
@media screen and (min-width: 576px) and (max-width: 991px) {
.slick-dots { width: 65% !important; }
.arrows { justify-content: space-between; }
}
 
@media all and (max-width: 480px) { component-page{ width:100vw }
.component-header-button { padding: var(--spacing-2) var(--spacing-4); border-radius: var(--bradius-max); border: 1px solid var(--interactive-border-gray-faded); background-color: var(--surface-background-gray-intense); cursor: pointer; margin-bottom: var(--size-12); }
.icon_lists li{ width:140px;}
.global-footer-large .footer-logo { margin-bottom: 12px; }
.footer-content { padding: 0 var(--spacing-5); }
.global-footer-minimal { padding: var(--spacing-5) 0; }
.global-footer-large, .global-footer-private { padding: var(--spacing-8) 0 var(--spacing-5) 0; }
.footer-logo-group { display: flex; gap: 4px; flex-direction: column; }
.global-footer-minimal .footer-links { flex-wrap: wrap; gap: var(--spacing-2); }
.global-footer-large .footer-logo img, .global-footer-private .footer-logo img { height: 28px; }
.global-footer-private .footer-badge { width: 28px; height: 28px; padding: var(--spacing-1); }
.global-footer-large .footer-brand, .global-footer-private .footer-brand { gap: var(--spacing-3); }
.global-footer-large .footer-main, .global-footer-private .footer-main { gap: var(--spacing-5); margin-bottom: var(--spacing-5); padding-bottom: var(--spacing-5); }
   
/* Ensure footer columns are properly spaced */
.global-footer-large .footer-links-columns, .global-footer-private .footer-links-columns { gap: var(--spacing-5); }
.global-footer-large .footer-column, .global-footer-private .footer-column { gap: var(--spacing-3); }
 
/* Social icons smaller */
.global-footer-large .footer-social-link, .global-footer-private .footer-social-link { width: 32px; height: 32px; }
.global-footer-large .footer-social-link i, .global-footer-private .footer-social-link i { font-size: var(--fz-size-18); }
.global-footer-private .footer-logo-group { display: flex; align-items: baseline; gap: var(--spacing-5); }
}
 
@media all and (max-width: 440px) {
.user_details.language{ display: none;}
}

/* ===== Landing Page Responsive ===== */

/* Tablet Landscape - 992px and below */
@media (max-width: 992px) {
.home-section { padding: var(--size-24) 0; }
.hero-card { min-height: 380px; padding: var(--size-40) var(--size-24); gap: var(--size-24); }
.hero-title { font-size: var(--fz-size-36); line-height: var(--lineheight-42); }
.hero-metrics { gap: var(--size-24); font-size: var(--fz-size-14); }
.hero-links-card { flex-wrap: wrap; justify-content: center; width: auto; max-width: 100%; gap: var(--size-08); }
.marquee-wrapper { height: 380px; }
.marquee-column { width: 49%; }
.figma-mcp-header { flex-direction: column; align-items: flex-start; gap: var(--size-16); }
.ecosystem-header-row { flex-direction: column; gap: var(--size-16); }
.darkmode-card { padding: var(--size-32) var(--size-24); }
.darkmode-section { padding: var(--size-24) 0 !important; }
.team-section { padding: var(--size-40) var(--size-24); }
.cta-band-dark { padding: var(--size-32) var(--size-24); gap: var(--size-32); }
.cta-band-dark .cta-title { font-size: var(--fz-size-24); line-height: var(--lineheight-34); }
}

/* Tablet Portrait - 768px and below */
@media (max-width: 768px) {
.home-section .container { width: 100%; max-width: 100%; padding: 0 var(--size-24); }
.hero-content{gap: var(--size-24);}
.hero-metrics { gap: var(--size-12);}
.ecosystem-section { padding: var(--size-24); }
.ecosystem-section .container { padding: var(--size-00); }
.figma-mcp-section .container { padding: var(--size-00); }
.darkmode-section .container { padding: var(--size-00); }
.faq-section .container { padding: var(--size-00); }
.cta-footer-section .container { padding: var(--size-00); }

.hero-card {  gap: var(--size-16); }
.hero-title { font-size: var(--fz-size-24); line-height: var(--lineheight-30); }

.cta-band-dark { flex-direction: column; text-align: center; padding: var(--size-32) var(--size-16) var(--size-24); gap: var(--size-24);}
.cta-actions { width:100%; display:block; gap: var(--size-04);}
.cta-band-dark .cta-title { font-size: var(--fz-size-24); line-height: var(--lineheight-26);}

}

/* Mobile - 576px and below */
@media (max-width: 580px) {
.i3_header .navbar-nav {position: absolute; right: -10px; top: 0;}

}
@media all and (max-width: 550px) {
.navbar-nav .user_details.language span{ display: none;}
 
}
@media screen and (min-width: 320px) and (max-width: 575px) {
.carousel .slick-slide { margin-right: 12px; margin-left: 9px; }
.arrows { justify-content: space-between; }
.slick-dots { width: 100%; }
.card { padding: 10px !important; }
}
 
@media screen and (min-device-width: 320px) and (max-device-width: 377px) { .btn_sec { margin-top: 5px; }
}

/* ============================================================
   Global Header - Mobile Responsive
   ============================================================ */
@media (max-width: 991px) {
/* Outer navbar: single row, no wrap */
.i3_header .navbar.res_header { flex-direction: row; flex-wrap: nowrap; align-items: center; overflow: visible; width: 100%; }

 /* Left group: shrink to content only — override w-100 */
.i3_header .res_header > .d-flex.justify-content-between { flex: 0 0 auto; width: auto !important; align-items: center; }

/* Hide app name, company logo and left divider on mobile — frees space for all icons in one row */
.i3_header .app-name { display: none; }
.i3_header .public_logo { display: none; }
.i3_header .vr.left_line { display: none; }

/* Hide hamburger toggler */
.i3_header .navbar-toggler.right_menu { display: none !important; }

/* Right collapse: fill remaining space */
.i3_header .res_header .navbar-collapse { display: flex !important; flex: 1 1 0; min-width: 0; width: auto; padding: 0; overflow: visible; }

/* Nav list: all icons in one row, aligned right, no scroll needed */
.i3_header .res_header .navbar-collapse .navbar-nav { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; overflow-x: auto; overflow-y: visible; padding: 4px 0 2px; scrollbar-width: none; -ms-overflow-style: none; }
.i3_header .res_header .navbar-collapse .navbar-nav::-webkit-scrollbar { display: none; }

/* Show vr separator between left and right */
.i3_header .vr.right_line { display: inline-block; }

/* Search panel: full width below header */
 .gh-search-panel { left: 0; right: 0; transform: none; width: 100%; min-width: 0; max-width: 100%; border-radius: 0; position: absolute; }

/* User profile dropdown: mobile bottom sheet */
.i3_header .gh-user-menu.show::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1090; }
.i3_header .navbar-nav > .nav-item.user_details:not(.gh-user-menu).show::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 1090; }
.i3_header .gh-user-menu > .dropdown-menu { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; margin: 0; min-width: 100vw; max-width: 100vw; width: 100vw; max-height: 82vh; overflow-y: auto; padding: var(--spacing-3) var(--spacing-4); border-radius: var(--bradius-large) var(--bradius-large) 0 0; border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted); background-color: var(--popup-background-subtle); box-shadow: 0px 16px 48px -4px var(--elevation-highraised); z-index: 1100; transform: translateY(105%); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.i3_header .navbar-nav > .nav-item.user_details:not(.gh-user-menu) > .dropdown-menu { position: fixed !important; left: 0 !important; right: 0; bottom: 0; top: auto; margin: 0; min-width: 100vw; max-width: 100vw; width: 100vw; max-height: 60vh; overflow-y: auto; padding: var(--spacing-3); border-radius: var(--bradius-large) var(--bradius-large) 0 0; border-top: var(--bwidth-thin) solid var(--surface-border-gray-muted); background-color: var(--popup-background-subtle); box-shadow: 0px 16px 48px -4px var(--elevation-highraised); z-index: 1100; transform: translateY(105%); opacity: 0; transition: transform 0.25s ease, opacity 0.25s ease; padding-bottom: calc(var(--spacing-3) + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.i3_header .navbar-nav > .nav-item.user_details:not(.gh-user-menu) > .dropdown-menu.show { transform: translateY(0); opacity: 1; }
.i3_header .navbar-nav > .nav-item.user_details:not(.gh-user-menu) > .dropdown-menu::before { content: ""; display: block; width: 56px; height: 4px; border-radius: var(--bradius-2xlarge); background: var(--interactive-icon-gray-muted); margin: 0 auto var(--spacing-4); }
.i3_header .gh-user-menu > .dropdown-menu.show { transform: translateY(0); opacity: 1; }
.i3_header .gh-user-menu > .dropdown-menu::before { content: ""; display: block; width: 56px; height: 4px; border-radius: var(--bradius-2xlarge); background: var(--interactive-icon-gray-muted); margin: 0 auto var(--spacing-4); }
.i3_header .gh-user-menu .gh-user-card { margin-bottom: var(--spacing-3); padding: var(--spacing-3); }
.i3_header .gh-user-menu .gh-role-chip { margin-bottom: var(--spacing-2); }
.i3_header .gh-user-menu .gh-pref-header { margin-top: var(--spacing-2); padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
 
/* Preference rows and nested list look like a grouped mobile section */
.i3_header .gh-user-menu .dropstart { margin-bottom: 0; }
.i3_header .gh-user-menu .dropstart > .gh-pref-item { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); border: none; border-bottom: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: 0; background-color: transparent; padding: var(--spacing-3); color: var(--surface-text-gray-normal); min-height: auto; transition: background-color 0.2s ease; }
.i3_header .gh-user-menu .dropstart > .gh-pref-item:hover { background-color: var(--surface-background-gray-subtle); }
.i3_header .gh-user-menu .dropstart > .gh-pref-item:active { background-color: var(--surface-background-gray-subtle); }
.i3_header .gh-user-menu .dropstart > .gh-pref-item .gh-pref-left { display: flex; align-items: center; gap: var(--spacing-2); font-weight: var(--fw-400); }
.i3_header .gh-user-menu .dropstart > .gh-pref-item .gh-pref-left i { color: var(--interactive-icon-gray-muted); font-size: var(--fz-size-18); }
.i3_header .gh-user-menu .dropstart > .gh-pref-item .gh-caret-right { transform: rotate(0deg); transition: transform 0.2s ease; color: var(--interactive-icon-gray-muted); font-size: var(--fz-size-16); }
 
.i3_header .gh-user-menu .dropstart:focus-within > .gh-pref-item .gh-caret-right { transform: rotate(-90deg); }
.i3_header .gh-user-menu .dropstart:hover > .gh-pref-item .gh-caret-right { transform: rotate(0deg); }
.i3_header .gh-user-menu .dropstart.is-open > .gh-pref-item .gh-caret-right { transform: rotate(-90deg); }
.i3_header .gh-user-menu .dropstart.is-open > .gh-pref-item { border-color: var(--surface-border-gray-muted); background-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.i3_header .gh-user-menu .gh-submenu { position: static; right: auto; left: auto; transform: none; box-shadow: none; border: none; border-left: var(--bwidth-thin) solid var(--surface-border-gray-muted); border-radius: 0; background-color: var(--surface-background-gray-subtle); margin: 0; min-width: 0; width: auto; padding: var(--spacing-2) 0; }
.i3_header .gh-user-menu .dropstart.is-open > .gh-submenu { display: block !important; } 
.i3_header .gh-user-menu .gh-submenu .dropdown-item { border-radius: 0; color: var(--surface-text-gray-normal); font-size: var(--fz-size-14); font-weight: var(--fw-400); padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) calc(var(--spacing-3) + var(--spacing-4)); margin-bottom: 0; background-color: transparent; border: none; }
.i3_header .gh-user-menu .gh-submenu .dropdown-item:last-child { margin-bottom: 0; }
.i3_header .gh-user-menu .gh-submenu .dropdown-item:hover,
.i3_header .gh-user-menu .gh-submenu .dropdown-item:focus-visible,
.i3_header .gh-user-menu .gh-submenu .dropdown-item:active { background-color: var(--surface-background-gray-moderate); }
  
}
 
/* Dark mode scrollbar styles */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track { background: var(--interactive-background-gray-disabled); }
  ::-webkit-scrollbar-thumb { border-radius: var(--bradius-max); background-color: var(--interactive-icon-gray-disabled); }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--interactive-icon-gray-muted); }
}