:root{
      	--brand:#0d6efd;
      	--accent:#ff7a00;
      	--muted:#6c757d;
      	--bg:#f8f9fa;
      	--bg-dark-blue: #0b2545;
        --active-orange: #ff3b30;
        --text-white: #ffffff;
        --center-bg: #ffffff;
        --hw-accent: #ff7a00; 
        --hw-muted: #6c757d; 
        --hw-bg: #ffffff; 
        --hw-shadow: rgba(2,6,23,.06);
        --accent-gold: #f59e0b; 
        --dark-navy: #020617;
        --bg-process:rgb(197, 191, 191);
    }
/* Color Palette & Base Overrides */
.bg-dark-custom {
  background-color: rgba(230,240,250,0.1) !important; 
}

/* --- LOGO TYPOGRAPHY --- */
.italic-font {
  font-style: italic;
  font-family: 'Arial Black', sans-serif;
  letter-spacing: -1px;
}
.logo-main {
  font-size: clamp(1.3rem, 2vw, 1.6rem); /* Scales fluidly across ALL screen sizes */
  line-height: 1;
  color: #1a73e8 !important; 
}
/* --- BRAND LOGO IMAGE CONSTRAINT ENGINE --- */
.nav-branding-logo {
  /* Fluid responsive height scaling rules across laptops and mobile screens */
  height: clamp(32px, 4.5vw, 42px); 
  width: auto; /* Preserves exact logo graphic aspect ratios cleanly */
  object-fit: contain;
  display: block;
}

/* Specific alignment tweaks for tablet/mobile collapsing togglers */
@media (max-width: 991.98px) {
  .custom-header .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.logo-sub {
  font-size: 0.65rem;
  letter-spacing: 3px;
  line-height: 1;
  margin-top: 2px;
  color: #888 !important;
}
/* --- FONT-BASED MOBILE TOGGLER ICON COLOR --- */
.custom-toggle-icon {
  color: #0f256e !important; /* Changes the icon color directly via font color */
  font-size: 1.6rem;         /* Controls the icon size cleanly */
  transition: color 0.2s ease-in-out;
}

/* Optional hover state */
.navbar-toggler:hover .custom-toggle-icon {
  color: #ff7a00 !important; /* Changes to theme orange on hover */
}
/* --- NAVIGATION BREAKPOINTS & VIEWPORTS --- */
.dropdown-menu{
    background-color: rgb(250,250,250) !important;
}
/* 1. Mobile & Tablet Specific Adjustments (< 992px) */
@media (max-width: 991.98px) {
  .custom-header .navbar-collapse {
    background-color: #1a1a1a; /* Distinct background contrast for mobile drawers */
    padding: 1.5rem;
    margin-top: 1rem;
    border-radius: 8px;
  }
  .custom-header .nav-link {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid #333; /* Clean separator lines on touch viewports */
  }
  .custom-header .nav-item:last-child .nav-link {
    border-bottom: none;
  }
  .custom-header .dropdown-menu {
    border: none;
    padding-left: 1rem; /* Indent submenus for structural clarity on mobile */
  }
}

/* 2. Desktop, Laptop & Notebook Shared Base Styles (>= 992px) */
@media (min-width: 992px) {
  .custom-header .nav-link {
    font-size: clamp(0.65rem, 1vw, 0.75rem) !important; /* Prevents overflow wrap on Notebooks */
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    color: #aaaaaa !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    transition: color 0.2s ease-in-out;
  }

  /* Smooth CSS Hover Interaction */
  .custom-header .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
  }
}

/* 3. Mid-Tier Notebook / Laptop Adjustment (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .custom-nav-spacing .nav-item {
    margin-left: 0.2rem;
    margin-right: 0.2rem;
  }
}

/* 4. Desktop / High-Res Monitors (>= 1200px) */
@media (min-width: 1200px) {
  .custom-header .nav-link {
    letter-spacing: 2px !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .custom-nav-spacing .nav-item {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

/* Global Hover/Active states */
.custom-header .nav-link:hover,
.custom-header .nav-link.active {
  color: #000000 !important;
}
.custom-header .dropdown-toggle::after {
  vertical-align: middle;
  margin-left: 0.35em;
  font-size: 0.8em;
}


/* HomePage Slideshow */

/* --- PREMIUM REVOLUTION-STYLE CAROUSEL MAIN WRAPPER --- */
.hero-slider-wrapper {
  position: relative;
  width: 100%;
  height: clamp(500px, 85vh, 1080px); /* Seamless dynamic fluid scaling across multi-viewports */
  overflow: hidden;
  background-color: #000000;
}

.hero-slider-wrapper .carousel,
.hero-slider-wrapper .carousel-inner,
.hero-slider-wrapper .carousel-item {
  height: 100%;
}

/* Background Zoom Animation Sequence on active slide launch */
.hero-slider-wrapper .slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 6.5s ease-out;
  z-index: 1;
}

.hero-slider-wrapper .carousel-item.active .slide-bg {
  transform: scale(1.08); /* Slow, immersive cinematic Ken Burns zoom motion */
}

/* Linear Contrast Shadow Gradient Shield */
.hero-slider-wrapper .slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);
  z-index: 2;
}

/* Absolute Caption Board Canvas Layer Placement */
.hero-slider-wrapper .carousel-caption {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  padding: 0;
}

/* --- STAGGERED LAYER ANIMATION ENGINE (Revolution Style) --- */

/* Reset base properties for layer entrance targets */
.hero-slider-wrapper .layer-sub-title,
.hero-slider-wrapper .layer-main-title,
.hero-slider-wrapper .layer-description,
.hero-slider-wrapper .layer-buttons-group {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Staggered execution triggers on slide activation activation */
.hero-slider-wrapper .carousel-item.active .layer-sub-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.hero-slider-wrapper .carousel-item.active .layer-main-title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.hero-slider-wrapper .carousel-item.active .layer-description {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.0s;
}

.hero-slider-wrapper .carousel-item.active .layer-buttons-group {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.3s;
}

/* --- FLUID LAYER TYPOGRAPHY BREAKPOINTS --- */
.hero-slider-wrapper .layer-sub-title {
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  font-weight: 700;
  color: #1a73e8; /* Accent branding blue from nav configuration */
  letter-spacing: 3px;
}

.hero-slider-wrapper .layer-main-title {
  font-size: clamp(1.8rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
}

.hero-slider-wrapper .layer-description {
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  color: #cccccc;
  line-height: 1.6;
  max-width: 680px;
}

/* --- INTERACTIVE BUTTON SYSTEMS --- */
.hero-slider-wrapper .btn-primary-custom {
  background-color: #1a73e8;
  border: 1px solid #1a73e8;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.9rem 2rem;
  letter-spacing: 1.5px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.hero-slider-wrapper .btn-primary-custom:hover {
  background-color: #155cb8;
  border-color: #155cb8;
  color: #ffffff;
  transform: translateY(-2px);
}

.hero-slider-wrapper .btn-outline-custom {
  background-color: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.9rem 2rem;
  letter-spacing: 1.5px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.hero-slider-wrapper .btn-outline-custom:hover {
  background-color: #ffffff;
  color: #111111;
  transform: translateY(-2px);
}

/* --- CAROUSEL UI NAVIGATION CONTROLS --- */
.hero-slider-wrapper .custom-control-btn {
  width: 5vw;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 4;
}

.hero-slider-wrapper:hover .custom-control-btn {
  opacity: 1; /* Soft control display appear toggle on component hover */
}

.hero-slider-wrapper .carousel-control-prev-icon-custom,
.hero-slider-wrapper .carousel-control-next-icon-custom {
  width: 45px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.hero-slider-wrapper .custom-control-btn:hover .carousel-control-prev-icon-custom,
.hero-slider-wrapper .custom-control-btn:hover .carousel-control-next-icon-custom {
  background-color: #1a73e8;
  border-color: #1a73e8;
}

/* Indicator Pill Dashboard Layout */
.hero-slider-wrapper .custom-indicators {
  margin-bottom: 2rem;
  justify-content: flex-start;
  left: 5%;
  right: auto;
  z-index: 4;
}

.hero-slider-wrapper .custom-indicators button {
  width: 24px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 2px;
  margin-right: 8px;
  transition: all 0.3s ease;
}

.hero-slider-wrapper .custom-indicators button.active {
  background-color: #1a73e8;
  width: 45px; /* Expanding dynamic visual tracker active accent state */
}

/* --- VISUAL TIMELINE LOOP RUNTIME PROGRESS BAR --- */
.hero-slider-wrapper .slider-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background-color: #1a73e8;
  z-index: 10;
}

/* CSS Keyframe Mapping Loop Trigger tracking */
@keyframes linearTimelineProgress {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Mobile Adaptive Optimization Rules overrides */
@media (max-width: 767.98px) {
  .hero-slider-wrapper {
    height: 520px;
  }
  .hero-slider-wrapper .btn-primary-custom,
  .hero-slider-wrapper .btn-outline-custom {
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    width: 100%;
    margin-bottom: 0.75rem;
  }
  .hero-slider-wrapper .custom-indicators {
    left: 50%;
    transform: translateX(-50%);
  }
}


/* Homepage Company Overview */
/* ==========================================================================
   COMPANY OVERVIEW SECTION STYLES WITH COMPLEX RESPONSIVE LAYOUT MATRIX
   ========================================================================== */

.company-overview-section {
  background-color: #ffffff;
}

/* --- LEFT SIDE: IMAGE LAYER MANAGEMENT CANVAS CONTROLLER ENGINE --- */
.image-composition-wrapper {
  position: relative;
  width: 100%;
  /* Ensures adequate vertical clearance box on large screen heights */
  min-height: 480px; 
}

/* Background Triangle Graphic Component Accent Layer Styling */
.bg-triangle-accent {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #f0f0f0 50%, transparent 50%);
  z-index: 1;
}

/* Top Back Layer Image Card Placement Spec Framework Rules */
.back-img-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  z-index: 2;
}
.back-img-frame img {
  width: 100%;
  object-fit: cover;
}

/* Bottom Right Front Floating Layer Overlap Element Spec Rules */
.front-img-frame {
  position: absolute;
  top: 150px;
  right: 0;
  width: 72%;
  z-index: 3;
  border: 12px solid #ffffff; /* Forms distinctive clean isolating margin outline frame overlap border */
  border-radius: 4px;
}
.front-img-frame img {
  width: 100%;
  object-fit: cover;
}

/* Floating Metrics Badge Card Layout Component Framework styling */
.floating-badge {
  position: absolute;
  bottom: -40px;
  left: -30px;
  background-color: #ffffff;
  border-radius: 4px;
  z-index: 4;
  min-width: 240px;
}

.floating-badge .badge-num {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  color: #ff7a00; /* Custom orange metric accent color string token match */
  line-height: 1;
  font-family: 'Arial Black', sans-serif;
}

.floating-badge .badge-text {
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: #111111;
}
.floating-badge .small-text {
  font-size: 0.75rem;
  letter-spacing: 1px;
}

/* --- RIGHT SIDE: CONTENT TYPOGRAPHY & BULLET LIST STYLING ENGINE --- */
.section-meta-label {
  font-size: 0.85rem;
  color: #ff7a00; /* Matching section tagline label theme metric orange */
  letter-spacing: 1px;
}

.overview-main-heading {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); /* Adaptive responsive headline text scaling engine */
  color: #111111;
  line-height: 1.25;
}

.accent-line-divider {
  width: 50px;
  height: 3px;
  background-color: #ff7a00; /* Match custom corporate orange signature separator asset bar line stripe */
}

.overview-description {
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Functional Checkmark Element Block Controls */
.overview-checklist li {
  font-size: 0.95rem;
  color: #111111;
}

.checklist-icon {
  color: #ff7a00; /* Signature orange for verification bullets check circle icon path markers */
  font-size: 1.2rem;
}

/* Chairman Footer Sign-Off Panel Row Styling */
.avatar-ring-wrapper {
  border: 2px solid #ff7a00; /* Orange halo accent surrounding the profile picture display circle */
  display: inline-block;
  line-height: 0;
}

.asset-avatar-img {
  width: 65px;
  height: 65px;
  object-fit: cover;
}

.chairman-name {
  color: #111111;
  font-size: 1.15rem;
}

.chairman-title {
  color: #ff7a00;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* --- MULTI-VIEWPORT RESPONSIVE MEDIA BREAKPOINT OVERRIDES SYSTEM --- */

/* 1. Mobile & Phablet Viewports (< 576px) */
@media (max-width: 575.98px) {
  .image-composition-wrapper {
    min-height: auto; /* Collapse explicit coordinate spacing frame container layouts */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .back-img-frame,
  .front-img-frame {
    position: relative; /* Restores block level element stacks onto standard mobile document workflows safely */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border: none !important;
  }
  
  .floating-badge {
    position: relative;
    bottom: 0;
    left: 0;
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
  }
}

/* 2. Tablet PC Viewport Breakpoints (576px to 991px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .image-composition-wrapper {
    min-height: 520px;
    max-width: 540px;
    margin: 0 auto; /* Restricts maximum box container expansion and centers layout safely on medium touch devices */
  }
  .front-img-frame {
    top: 180px;
  }
  .floating-badge {
    bottom: -20px;
    left: 10px;
  }
}

/* 3. Laptops & Mid-tier Notebook Viewports (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .image-composition-wrapper {
    min-height: 420px;
  }
  .front-img-frame {
    top: 120px;
  }
  .floating-badge {
    bottom: -30px;
    left: -20px;
    min-width: 210px;
    padding: 1rem !important;
  }
}
/* ==========================================================================
   FEATURES / PRODUCT CATEGORY GRID SECTION STYLING MAPPING EXECUTIONS
   ========================================================================== */

.bg-light-custom {
  background-color: #fcfcfc !important;
}

/* --- TEXT LAYOUT HEADER ENGINE --- */
.catalog-main-heading {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
}

.heading-accent-line {
  width: 60px;
  height: 2px;
  background-color: #111111; /* Clean layout minimalist baseline accent divider stripe */
}

.catalog-sub-description {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  line-height: 1.6;
}

/* --- CIRCULAR ITEM CARD HOVER MATRIX ENGINE --- */
.category-card {
  cursor: pointer;
}

.category-circle-wrapper {
  position: relative;
  width: 85%; /* Ensures comfortable padding inside responsive layout boundaries */
  max-width: 240px;
  aspect-ratio: 1 / 1; /* Enforces strict mathematical perfect circular symmetry bounds */
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.category-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Immersive Dark Layer Mask Slide Effect on Component Hover */
.circle-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 115, 232, 0.85); /* Uses corporate accent blue tracking token */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 50%;
}

.circle-hover-overlay .small-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  transform: translateY(10px);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* CSS Mouse Action Hover States */
.category-card:hover .category-thumbnail {
  transform: scale(1.08);
}

.category-card:hover .circle-hover-overlay {
  opacity: 1;
}

.category-card:hover .circle-hover-overlay .small-label {
  transform: translateY(0);
}

/* Typography Title Text Node Placement below Circular frame elements */
.category-title {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  margin-top: 1rem;
  transition: color 0.2s ease;
}

.category-card:hover .category-title {
  color: #1a73e8 !important; /* Highlights title into theme color on card trigger frame interaction */
}

/* --- MULTI-VIEWPORT BREAKPOINT MEDIA QUERY HANDLING --- */

/* Mobile viewports / Phone display scales (< 576px) */
@media (max-width: 575.98px) {
  .category-circle-wrapper {
    width: 60%; /* Scales preview card sizes cleanly to maintain layout proportions on small viewports */
  }
}

/* homoe page our advantage section */

/* --- SMOOTH MULTI-IMAGE HOVER TRANSITION ENGINE --- */
.advantage-fade-img {
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
  transform: scale(1);
}

/* Temporary crossfade animation utility flag applied via JS */
.advantage-fade-img.fade-out {
  opacity: 0.1;
  transform: scale(0.97);
}

/* ==========================================================================
   CORRECTED ADVANTAGES ENGINE WITH DISTINCT INDEPENDENT ROUNDED SHAPES
   ========================================================================== */

/* Outer Row Wrapper must have a transparent background so the shapes look separate */
.advantage-row-item {
  width: 100%;
  background: transparent !important; /* Forces outer wrapper transparency */
  border: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* 1. Distinct Rounded Number Circle Shape */
.advantage-row-item .badge-number-circle {
  width: 55px;
  height: 55px;
  background-color: #ffffff;
  border-radius: 50% !important; /* Guarantees a perfect isolated circular shape */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #111111;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* Soft drop dynamic depth shadow */
  transition: all 0.25s ease-in-out;
  flex-shrink: 0;
}

/* 2. Distinct Soft Rounded Rectangular Text Card Shape */
.advantage-text-pane {
  background-color: #f5f5f5 !important;
  border-radius: 4px !important; /* Gives the text block clean, distinct soft corners */
  padding: 1.5rem !important;
  transition: all 0.25s ease-in-out;
}

.advantage-text-pane .pane-title {
  color: #111111 !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.advantage-text-pane .pane-description {
  color: #666666 !important;
  font-size: 0.88rem;
}

/* --- HOVER & ACTIVE STATE RE-RENDERING ENGINE --- */

/* Targets the circular shape ONLY */
.advantage-row-item:hover .badge-number-circle,
.advantage-row-item.active .badge-number-circle {
  background-color: #ff7a00 !important;
  color: #ffffff !important;
}

/* Targets the rectangular text card shape ONLY */
.advantage-row-item:hover .advantage-text-pane,
.advantage-row-item.active .advantage-text-pane {
  background-color: #ff7a00 !important;
}

/* Switches inner text to white on active card only */
.advantage-row-item:hover .pane-title,
.advantage-row-item:hover .pane-description,
.advantage-row-item.active .pane-title,
.advantage-row-item.active .pane-description {
  color: #ffffff !important;
}

/* Positions the isolated triangle point pointer precisely */
.advantage-row-item:hover .indicator-pointer-arrow,
.advantage-row-item.active .indicator-pointer-arrow {
  opacity: 1 !important;
  border-right-color: #ff7a00 !important;
}


/* homepage service solution section */

/* ==========================================================================
   COMPREHENSIVE SERVICE SOLUTIONS SECTION GRID
   ========================================================================== */

/* --- MAIN TEXT LAYOUT HEADER ENGINE --- */
.solutions-main-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #111111;
  letter-spacing: -0.5px;
}

.solutions-sub-description {
  font-size: clamp(0.88rem, 1.1vw, 0.95rem);
  line-height: 1.65;
  max-width: 960px;
}

/* --- THEME BLUE SERVICE CARD GRID CONTROLS --- */
.solution-grid-card {
  background-color: #0d3b94 !important; /* Deep layout royal blue background matching design */
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease;
}

/* Thin internal aesthetic design line element separator */
.solution-card-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15); /* Soft low contrast line breaks */
}

/* Linear thin font-awesome outline vector icons setup */
.solution-icon-box i {
  font-size: 2.5rem;
  color: #ffffff;
}

.solution-card-title {
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.solution-card-text {
  font-size: clamp(0.82rem, 1vw, 0.88rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75) !important; /* Muted readable white text layout tracking override */
}

/* --- HOVER EFFECT INTERACTION --- */
.solution-grid-card:hover {
  transform: translateY(-5px);
  background-color: #0a2f76 !important; /* Slightly deepens blue color on card interaction hover states */
}

/* ==========================================================================
   CASE SHOW SPLIT COMPONENT LAYOUT MATRIX
   ========================================================================== */

/* Light gray subtle panel background matching the image right side */
.bg-light-panel {
  background-color: #fcfcfc !important;
}

/* --- LEFT SIDE: COMPONENT CANVAS WRAPPER CONSTRAINTS --- */
.case-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.split-image-left {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- RIGHT SIDE: TYPOGRAPHY TEXT LAYOUT CONTROLS --- */
.case-meta-tag {
  font-size: 0.9rem;
  color: #ff7a00; /* Custom orange identifier color tag */
  font-weight: 500;
  letter-spacing: 0.5px;
}

.case-main-heading {
  font-size: clamp(1.8rem, 3.8vw, 2.8rem); /* Fluid scalable header text engine */
  color: #1a1a1a !important;
  line-height: 1.2;
  letter-spacing: -0.5px;
  max-width: 580px;
}

.case-accent-divider {
  width: 40px;
  height: 2.5px;
  background-color: #ff7a00; /* Matching custom corporate orange line break stripe */
}

.case-paragraph-description {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  line-height: 1.7;
  max-width: 620px;
}

/* --- ACTION UTILITY PILL BUTTON CONTROLS --- */
.btn-case-orange {
  background-color: #ff7a00 !important;
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.85rem 2.2rem;
  letter-spacing: 0.2px;
  transition: background-color 0.25s ease-in-out;
  border: none !important;
}

.btn-case-orange:hover {
  background-color: #e06c00 !important; /* Soft dark deep orange tone shift on cursor hover */
}
/* --- CASE SHOW SLIDESHOW ENGINE CONTROLS --- */
#caseShowCarousel,
#caseShowCarousel .carousel-inner,
#caseShowCarousel .carousel-item {
  height: 100%;
}

.split-image-slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Custom indicator dot styles targeting orange layout theme colors */
.case-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  opacity: 0.6;
  border: none !important;
  margin: 0 4px !important;
  transition: all 0.2s ease;
}

.case-indicators button.active {
  background-color: #ff7a00 !important; /* Highlights matching custom orange design accent token */
  opacity: 1;
  transform: scale(1.2);
}

/* Slider control utility arrow hover states mechanics */
.case-control-arrow {
  width: 10%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#caseShowCarousel:hover .case-control-arrow {
  opacity: 0.8;
}

/* Maintain proper height scaling rules matching original multi-viewports adjustments */
@media (max-width: 991.98px) {
  .min-height-mobile {
    height: 380px !important; /* Forces solid block height container limits on mobile viewport stacks */
  }
}

/* --- MULTI-VIEWPORT BREAKPOINT MEDIA QUERY HANDLING --- */

/* 1. Mobile & Tablet Touch Screens Overrides (< 992px) */
@media (max-width: 991.98px) {
  .min-height-mobile {
    height: 350px; /* Explicit structural clearance grid height block for image box view on smaller viewports */
  }
  .case-content-pane {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* 2. Desktop High-Res Wide Display Monitor Tweaks (>= 1200px) */
@media (min-width: 1200px) {
  .case-content-pane {
    padding-left: 6rem !important;
  }
}
/* ==========================================================================
   OUR CLIENTS / PARTNER LOGO GRID SECTION STYLES
   ========================================================================== */

/* --- TYPOGRAPHY TEXT LAYOUT CONTROLS --- */
.clients-meta-tag {
  font-size: 0.9rem;
  color: #ff7a00; /* Custom orange subtitle theme tracking token */
  font-weight: 500;
  letter-spacing: 0.5px;
}

.clients-main-heading {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); /* Fluid responsive headline scaling engine */
  color: #222222 !important;
  letter-spacing: -0.5px;
}

/* --- LOGO WRAPPER DISPLAY TILES --- */
.client-logo-card {
  background-color: #f7f7f7 !important; /* Soft light gray card container background color */
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease-in-out;
  min-height: 100px;
}

/* Restricts vector assets inside box grids without breaking image aspect structural bounds */
.logo-asset {
  max-height: 50px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(0.85); /* Converts placeholder nodes into clean grayscale lines */
  transition: all 0.3s ease-in-out;
}

/* --- INTERACTIVE ACTION HOVER STATES --- */
.client-logo-card:hover {
  background-color: #ffffff !important; /* Blends context area into background space on hover selection */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); /* Elevates active card block depth profile */
  transform: translateY(-3px);
}

.client-logo-card:hover .logo-asset {
  filter: grayscale(0) opacity(1); /* Smoothly restores full brand color saturation profile markers */
}

/* --- MULTI-VIEWPORT BREAKPOINT MEDIA QUERY HANDLING --- */

/* Mobile viewports / Phone display scales (< 576px) */
@media (max-width: 575.98px) {
  .client-logo-card {
    min-height: 85px;
    padding: 1rem !important;
  }
  .logo-asset {
    max-height: 38px;
  }
}
/* ==========================================================================
   MINIMALIST CORPORATE FOOTER STYLING CONFIGURATIONS
   ========================================================================== */

.main-footer {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #111111;
}

/* --- LOGO TYPOGRAPHY RECONSTRUCTION --- */
.brand-logo-graphics {
  font-size: 2.2rem;
  letter-spacing: -2px;
  line-height: 0.9;
  font-family: 'Arial Black', sans-serif;
}
.brand-name-sub {
  font-size: 0.82rem;
  letter-spacing: 4.5px;
}

/* --- QR FRAME CONSTRAINTS --- */
.qr-code-box {
  width: 140px;
  height: 140px;
}
.qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- SECTION LINK TILES TYPOGRAPHY --- */
.footer-heading {
  font-size: 0.95rem;
  letter-spacing: 2px;
  color: #111111 !important;
}

.footer-item-link {
  font-size: 0.88rem;
  transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
}

.footer-item-link:hover {
  color: #ff7a00 !important; /* Transitions to orange brand profile accent state safely */
  padding-left: 2px;
}

/* --- CONTACT INFO MATRIX ALIGNMENTS --- */
.contact-meta-icon {
  font-size: 0.95rem;
  color: #111111; /* Clean high-contrast dark gray icons matching image layout blueprint */
  width: 16px;
  text-align: center;
}

.contact-text-link,
.contact-address-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #555555 !important;
}

.contact-text-link:hover {
  color: #ff7a00 !important;
}

.small-line-height {
  line-height: 1.4;
}

/* --- COPYRIGHT DISCLAIMER ACCENT --- */
.small-text {
  font-size: 0.78rem;
  letter-spacing: 0.2px;
}
/* --- FOOTER BRAND LOGO CONTROLS --- */
.footer-branding-logo {
  height: clamp(35px, 5vw, 45px); /* Scales cleanly across mobile and desktop footer areas */
  width: auto; /* Preserves logo aspect ratio without distortion */
  object-fit: contain;
  display: block;
}
/* --- MULTI-VIEWPORT RESPONSIVE SYSTEM OVERRIDES --- */
@media (max-width: 575.98px) {
  .footer-heading {
    margin-bottom: 1.25rem !important;
    margin-top: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
  }
  .footer-branding-logo {
    margin: 0 auto;
  }
}
.main-footer .row.justify-content-between {
  align-items: flex-start !important;
}

/* ==========================================================================
   FULL WIDTH CENTERED SUBPAGE BREADCRUMB BANNER FRAMEWORK
   ========================================================================== */

.page-breadcrumb-banner {
  width: 100%;
  height: 250px; /* Precise fixed height specification */
  overflow: hidden;
  background-color: #111111; /* Fallback safe base canvas shade layer */
}

/* Immersive asset display background placement bounds */
.breadcrumb-image-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Dark layout overlay shield protecting white text copy contrast tracking fields */
.breadcrumb-dark-shield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(15, 37, 110, 0.65); /* Inherits your corporate dark blue identity layout color */
  z-index: 2;
}

.z-index-3 {
  z-index: 3;
}

/* --- TYPOGRAPHY TEXT LAYOUT CONTROLS --- */
.breadcrumb-main-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem); /* Fluid responsive headline matching multi-viewports layers */
  letter-spacing: -0.5px;
}

/* Structural adjustments to Bootstrap core elements templates configuration rules */
.custom-breadcrumb-list {
  background: transparent !important;
  padding: 0 !important;
}

.custom-breadcrumb-list .breadcrumb-item {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Separator dash chevron graphic layout accent character rules */
.custom-breadcrumb-list .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5) !important;
  content: "\f105" !important; /* FontAwesome right angle bracket chevron index symbol */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.8rem;
  vertical-align: middle;
}

.breadcrumb-path-link {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.2s ease-in-out;
}

.breadcrumb-path-link:hover {
  color: #ff7a00 !important; /* Glows matching custom corporate accent orange on active mouse actions */
}

.custom-breadcrumb-list .breadcrumb-item.active {
  color: #ffffff !important;
  opacity: 0.95;
}

.small-icon {
  font-size: 0.8rem;
  vertical-align: baseline;
}

/* Mobile responsive screen height scaling adjustments rules overrides */
@media (max-width: 575.98px) {
  .page-breadcrumb-banner {
    height: 200px; /* Slightly tight height layout boundary box optimal for phone screens */
  }
}

/* Company Overview */
/* ==========================================================================
   ABOUT COMPANY OVERVIEW COMPONENT BLOCK
   ========================================================================== */

/* --- LEFT SIDE: CONTENT PANEL GRAPHICS & TYPOGRAPHY --- */
/* ==========================================================================
   ABOUT COMPANY OVERVIEW - ASYMMETRICAL SPLIT-EDGE LAYOUT
   ========================================================================== */

/* --- LEFT SIDE: CONTENT PANEL GRAPHICS & TYPOGRAPHY --- */
.about-main-heading {
  font-size: clamp(2rem, 4.5vw, 3rem); /* Fluid scalable header text engine */
  color: #2e2e2e !important;
  letter-spacing: -0.5px;
}

.about-paragraph-description {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  color: #666666 !important;
  text-align: justify; /* Editorial paragraph layout block */
}

/* Custom list layout targeting FontAwesome vector gear line items */
.metric-list-icon {
  font-size: 0.9rem;
  color: #444444; /* Industrial slate color tone */
  width: 18px;
  text-align: center;
}

.metric-text {
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  line-height: 1.5;
  color: #555555 !important;
}

.metric-text strong {
  font-weight: 700;
  color: #333333 !important;
}

/* --- RIGHT SIDE: PHOTO SHOWCASE CANVAS WRAPPER --- */
.about-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.split-image-right {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- MULTI-VIEWPORT BREAKPOINT MEDIA QUERY HANDLING --- */

/* 1. Mobile & Tablet Touch Screens Overrides (< 992px) */
@media (max-width: 991.98px) {
  .min-height-mobile {
    height: 380px; /* Forces block image box visibility when columns stack on small devices */
  }
  .about-content-pane {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* 2. Desktop High-Res Wide Display Monitor Scaling Margins (>= 1200px) */
@media (min-width: 1200px) {
  .ps-xl-6 {
    padding-left: 8.5rem !important; /* Insets the text cleanly on wide monitor screen margins */
  }
}

/* ==========================================================================
   QUALITY POLICY SPLIT COMPONENT LAYOUT MATRIX
   ========================================================================== */

/* Light gray backdrop shade matching the right panel background in the screenshot */
.bg-light-policy-panel {
  background-color: #f7f7f7 !important;
}

/* --- LEFT SIDE: IMAGE FRAME CONTROLS --- */
.policy-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.split-image-left {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- RIGHT SIDE: CONTENT PANEL GRAPHICS & TYPOGRAPHY --- */
.policy-main-heading {
  font-size: clamp(1.8rem, 4vw, 2.6rem); /* Fluid responsive headline text scaling engine */
  color: #2e2e2e !important;
  letter-spacing: -0.5px;
}

.policy-paragraph-description {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.75;
  color: #666666 !important;
  text-align: justify; /* Mirrors the clean, editorial alignment block layout in your reference */
}

/* --- MULTI-VIEWPORT BREAKPOINT MEDIA QUERY HANDLING --- */

/* 1. Mobile & Tablet Touch Screens Overrides (< 992px) */
@media (max-width: 991.98px) {
  .min-height-mobile {
    height: 350px; /* Explicit structural clearance grid height block for image box view on stacked mobile layouts */
  }
  .policy-content-pane {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}

/* 2. Desktop High-Res Wide Display Monitor Tweaks (>= 1200px) */
@media (min-width: 1200px) {
  .pe-xl-6 {
    padding-right: 7.5rem !important; /* Balances layout spacing content fields safely on ultra-wide screens */
  }
}

/* ==========================================================================
   WELFARE AND COMPLIANCE ASYMMETRICAL SPLIT LAYOUT ENGINE
   ========================================================================== */

/* Dark charcoal background fill layer for the right side matching your image */
.bg-dark-panel {
  background-color: #222222 !important;
}

/* --- LEFT SIDE: WELFARE FACILITIES CONTROLS --- */
.welfare-main-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #2e2e2e !important;
  letter-spacing: -0.5px;
}

/* Custom list layout matching your brand's blue gears */
.list-blue-icon {
  font-size: 0.82rem;
  color: #1a73e8 !important; /* Theme blue icon color tracking token */
  width: 16px;
  text-align: center;
}

.list-item-text {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.5;
  color: #666666 !important;
}

/* --- RIGHT SIDE: COMPLIANCE CONTENT CONTROLS --- */
.compliance-vector-icon {
  font-size: 2.2rem;
  color: #ffffff; /* Elegant white outline icons matching the visual */
  opacity: 0.85;
}

.compliance-block-title {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  letter-spacing: -0.2px;
}

.compliance-block-desc {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  line-height: 1.65;
}

.text-light-muted {
  color: #aaaaaa !important; /* Muted gray text color on dark backdrop layer for readability */
}

/* --- MULTI-VIEWPORT BREAKPOINT MEDIA QUERY HANDLING --- */

/* 1. Mobile & Tablet Touch Screens Overrides (< 992px) */
@media (max-width: 991.98px) {
  .welfare-pane,
  .compliance-pane {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}

/* 2. Desktop High-Res Wide Display Monitor Spacing Tweaks (>= 1200px) */
@media (min-width: 1200px) {
  .ps-xl-6 {
    padding-left: 7.5rem !important; /* Spaces the left panel perfectly from screen margins */
  }
  .pe-xl-6 {
    padding-right: 7.5rem !important; /* Spaces the right panel perfectly to screen margins */
  }
}

/* --- COLLAPSIBLE ANIMATION CORE ENGINE --- */
.sidebar-collapsible-wrapper {
  max-height: 300px; /* Provides total vertical space boundary clearances */
  opacity: 1;
  visibility: visible;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, visibility 0.3s;
  overflow: hidden;
}

/* Collapsed class style rule framework targets invoked via JavaScript actions */
.sticky-actions-sidebar.collapsed .sidebar-collapsible-wrapper {
  max-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Rotates the interior font-awesome font arrow directly into your left-pointing style match */
/* .sticky-actions-sidebar.collapsed .header-toggle i {
  transform: rotate(180deg);
} */

/* Retain previous hover states cleanly */
.sticky-actions-sidebar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 50px;
  z-index: 9999;
}
.sticky-actions-sidebar {
  overflow: visible !important; /* Forces layout to let hidden elements pop out left */
}

.sidebar-collapsible-wrapper {
  overflow: visible !important; /* Prevents text elements from getting sliced vertically */
}

/* Elevates the reveal layer index so it slides over existing background elements */
.action-reveal-panel {
  z-index: 99999 !important; 
  background-color: #111111 !important; /* Ensures crisp text readability overlay */
}
.bg-dark-sidebar { background-color: #111111 !important; }
.bg-red-sidebar { background-color: #e61d2b !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-action-item { position: relative; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.action-main-icon { color: #ffffff !important; font-size: 1.3rem; transition: transform 0.25s ease; }
.action-reveal-panel { position: absolute; top: 0; right: 50px; height: 50px; background-color: #111111; display: flex; align-items: center; padding: 0 1.25rem; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s; pointer-events: none; border-radius: 4px 0 0 4px; }
.reveal-link { color: #ffffff !important; text-decoration: none; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.5px; }
.reveal-text { color: #ffffff !important; font-size: 0.82rem; }
.sidebar-action-item:hover .action-main-icon { transform: scale(1.15); }
.bg-red-sidebar:hover { background-color: #111111 !important; }
.sidebar-action-item:hover .action-reveal-panel { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }
/* --- MOBILE LAYOUT OPTIMIZATIONS FOR THE FLOATING SIDEBAR --- */
@media (max-width: 767.98px) {
  /* Shifts the bar slightly lower down the screen on mobile devices */
  .sticky-actions-sidebar {
    top: auto !important;
    bottom: 20px !important;
    transform: none !important;
    right: 0;
  }
  
  /* Slightly scales down the item boxes on small screens to look compact */
  .sidebar-action-item {
    width: 42px !important;
    height: 42px !important;
  }
  
  .action-main-icon {
    font-size: 1.1rem !important;
  }
  
  /* Automatically snaps slide-out link drawers cleanly over the phone viewport */
  .action-reveal-panel {
    right: 42px !important;
    height: 42px !important;
    padding: 0 0.85rem !important;
  }
}
/* ==========================================================================
   OUR WORKING PROCESS SECTION STYLES WITH ALTERNATE STAGGER GRID
   ========================================================================== */

/* --- MAIN TEXT HEADER ENGINE --- */
.process-main-heading {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  letter-spacing: -0.5px;
}

.process-heading-divider {
  width: 45px;
  height: 2px;
  background-color: #ff7a00; /* Custom orange design divider stripe rule line */
}

/* --- ALTERNATING DESKTOP STAGGER LOGIC GRID --- */
@media (min-width: 992px) {
  .process-cards-row {
    min-height: 520px; /* Provides vertical leeway box workspace for desktop staggering displacement */
  }
  .step-col-low {
    padding-bottom: 2rem;
  }
  .step-col-high {
    padding-top: 2rem;
  }
}

/* --- THEME PRODUCT PROCESS LAYOUT CARDS --- */
.process-card {
  border-color: #f1f1f1 !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.process-icon-box i {
  font-size: 2.8rem;
  color: #ff7a00; /* Signature orange icon layout path vector lines mapping */
}

.process-card-title {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  letter-spacing: -0.2px;
}

.process-card-desc {
  font-size: 0.88rem;
  line-height: 1.6;
}

/* --- PROGRAMMATIC SPEECH-BUBBLE NUMBER FLOATING CONTAINER TAGS --- */
.process-number-bubble {
  position: absolute;
  width: 42px;
  height: 42px;
  background-color: #ffffff;
  color: #111111;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 30px; /* Indentation index safe margin clearance offset matching your design layout bounds */
}

/* TOP SPECIFICATION ACCENT SPEECH BALLOON TAILS */
.bubble-top {
  top: -62px; /* Pulls bubble into open layout white-space comfortably */
}
.bubble-top::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ffffff; /* Forms small downward pointing sharp vector speech tip */
}

/* BOTTOM SPECIFICATION ACCENT SPEECH BALLOON TAILS */
.bubble-bottom {
  bottom: -62px;
}
.bubble-bottom::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff; /* Forms small upward pointing sharp vector speech tip */
}

/* Hover Mouse State Interactions */
.process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important;
}

/* --- MULTI-VIEWPORT BREAKPOINT RESPONSIVE HANDLING OVERRIDES --- */

/* Tablet & Mobile Viewports Constraints Fallbacks Matrix (< 992px) */
@media (max-width: 991.98px) {
  /* Flatten out explicit stagger padding to prevent uneven vertical space clusters on stacked screens */
  .step-col-low, .step-col-high {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Convert floating speech elements into inline top header metrics tabs for clean mobile presentation */
  .process-card {
    margin-top: 3.5rem;
  }
  
  .process-number-bubble {
    top: -55px !important;
    bottom: auto !important;
    left: 20px !important;
  }
  
  .process-number-bubble::after {
    top: auto !important;
    bottom: -8px !important;
    border-bottom: none !important;
    border-top: 8px solid #ffffff !important; /* Standardizes downward arrow anchor tips on all phone viewports */
  }
}
/* service icon slider */
    .icon-box { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px; gap:10px; }
    .icon-box .icon { width:72px; height:72px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--brand); box-shadow:0 8px 20px rgba(0,0,0,.06); }
    .icon-box p { margin:0; font-weight:600; color:#333; }

    /* ==========================================================================
   SERVICE PAGE VIBRANT BRAND CTA ACCENT RIBBON
   ========================================================================== */

.service-cta-section {
  background-color: #ff7a00 !important; /* Custom corporate layout orange ribbon theme background color token */
  width: 100%;
}

/* --- LEFT SIDE: TYPOGRAPHY BRAND CONTENT CONTROLS --- */
.cta-heading {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); /* Fluid scalable header engine matching layout guidelines */
  letter-spacing: -0.5px;
}

.cta-description {
  font-size: clamp(0.88rem, 1.1vw, 1.02rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85) !important; /* Muted tracking contrast color style modifier */
}

/* --- RIGHT SIDE: SEARCH BAR COMPONENT MATRIX --- */
.cta-search-form {
  width: 100%;
  max-width: 580px; /* Constrains input box growth parameters securely on wide monitors */
  height: 54px;     /* Comfortable height index profile matching image design sample */
}

/* Text placeholder inputs styling fields */
.cta-search-form .keywords-input {
  font-size: 0.9rem;
  color: #333333;
  background-color: #ffffff;
}

.cta-search-form .keywords-input::placeholder {
  color: #bbbbbb; /* Soft gray indicator text watermark string label mapping */
  opacity: 1;
}

.cta-search-form .keywords-input:focus {
  box-shadow: none; /* Strips focus glow to preserve flat minimalist layout matrix */
  background-color: #ffffff;
}

/* Action submit query button layout execution tags */
.search-submit-btn {
  background-color: #222222 !important; /* Premium dark gray tone color block match */
  color: #ffffff !important;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease-in-out;
  border: none !important;
}

.search-submit-btn:hover {
  background-color: #111111 !important; /* Deep black layout switch on cursor actions hover states */
}

/* --- MULTI-VIEWPORT BREAKPOINT RESPONSIVE HANDLING OVERRIDES --- */

/* Mobile viewports / Phone display scales (< 992px) */
@media (max-width: 991.98px) {
  .cta-search-form {
    margin: 0 auto; /* Horizontally centers search row item blocks safely when column stacks on smaller viewports */
  }
}

@media (max-width: 575.98px) {
  .cta-search-form {
    height: auto;
    flex-direction: column; /* Stacks inputs and submit button vertically layout on compact glass viewports */
    gap: 0.75rem;
    box-shadow: none !important;
    background: transparent !important;
  }
  .keywords-input {
    height: 48px;
  }
  .search-submit-btn {
    height: 48px;
    width: 100%;
  }
}
    /* ---------- Partners swiper ---------- */
.partners { padding:48px 0; background:#fff; }
.partners .swiper-slide { display:flex; align-items:center; justify-content:center; }

.partners .partner-logo { 
    max-height: 72px; 
    max-width: 100%; /* Prevents the image from overflowing its slide column */
    object-fit: contain; 
    filter: grayscale(.05); 
    opacity: .95; 
}
.section-title { font-size:1.6rem; font-weight:700; color:var(--darkblue); margin-bottom:18px; }

.capacity-hero { background: linear-gradient(rgba(202, 206, 226, 0.85), rgba(254, 255, 255, 0.85)); background-size: cover; padding: 100px 0; }
.capacity-hero h2{
  color: var(--dark-navy);
}
.capacity-hero p{
  color:var(--bg-dark-blue);
  font-size: 22px;
}

/* Smooth transition for the hover effect */
.capacity-hero .custom-hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Elevates the card and deepens the shadow on hover */
.capacity-hero .custom-hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}


/* Card Core Mechanics */
.machinery-card {
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    overflow: hidden;
}

/* Base Card Header (Dark Navy Blue) */
.machinery-card .card-header {
    background-color: #0B1B3D; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Base Card Body (White layout) */
.machinery-card .card-body {
    background-color: #ffffff;
    color: #212529;
    transition: all 0.35s ease;
}

/* Hover Movement Elevation Shadow */
.machinery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Dark Mode Transition on Hover */
.machinery-card:hover .card-body {
    background-color: #0B1B3D; 
    color: #ffffff;            
}

.machinery-card:hover .card-body strong {
    color: #f8f9fa;
}

/* Inverts badge colors for sharp visibility during hover */
.machinery-card:hover .card-body .badge {
    background-color: #ffffff !important;
    color: #0B1B3D !important;
}


/* Card Mechanics and Layout Adjustments */
.custom-unit-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    border-radius: 8px;
    overflow: hidden;
    /* Variant difference: Subtle left-side border stroke */
    border-left: 4px solid #0056b3; 
}

/* Base Card Header (Dark Navy Blue Style) */
.custom-unit-card .card-header {
    background-color: #0B1B3D;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Card Body Setup */
.custom-unit-card .card-body {
    background-color: #ffffff;
    color: #333333;
    transition: all 0.35s ease;
}

/* Divider Lines */
.custom-unit-card hr {
    opacity: 0.15;
    transition: all 0.35s ease;
}

/* Card Hover Elevation States */
.custom-unit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(11, 27, 61, 0.12) !important;
    border-left-color: #0B1B3D;
}

/* Dark Mode Transition triggered upon Hover */
.custom-unit-card:hover .card-body {
    background-color: #0B1B3D;
    color: #ffffff;
}

.custom-unit-card:hover hr {
    opacity: 0.3;
    border-color: #ffffff;
}

.custom-unit-card:hover .text-muted {
    color: #cbd5e1 !important;
}

/* Layout adjustments to the data badge on hover */
.custom-unit-card:hover .badge {
    background-color: #ffffff !important;
    color: #0B1B3D !important;
}

/* Card Core Styling */
.info-display-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

/* Base Card Body Styling */
.info-display-card .card-body {
    background-color: #ffffff;
    transition: all 0.4s ease;
}

/* Letters spacing for a premium layout feel */
.tracking-wide {
    letter-spacing: 0.5px;
}

/* INTERACTIVE HOVER EVENT */
.info-display-card:hover {
    /* Lifts the card upwards slightly */
    transform: translateY(-8px);
    /* Creates a beautiful, soft, and deep shadow drop */
    box-shadow: 0 20px 40px rgba(11, 27, 61, 0.15) !important;
}

/* Optional: Slight color change on the body elements during layout hover */
.info-display-card:hover .card-body {
    background-color: #fafbfc;
}

.product-overview { padding:64px 0; background:var(--bg); }
    .product-overview .eyebrow { display:inline-block; color:var(--accent); font-weight:700; margin-bottom:10px; }
    .product-overview h2 { color:var(--darkblue); font-weight:700; margin-bottom:12px; }
    .product-overview p.lead { color:#333; line-height:1.6; }

    /* responsive video wrapper */
    .video-wrap { position:relative; width:100%; padding-bottom:56.25%; /* 16:9 */ height:0; overflow:hidden; border-radius:8px; box-shadow:0 8px 24px rgba(2,6,23,.06); background:#000; }
    .video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

    /* small caption under video */
    .video-caption { margin-top:12px; color:var(--muted); font-size:.95rem; }

    /* ---------- Mission & Vision ---------- */
    .mission-vision { 
    padding: 56px 0;  
}

.mv-card { 
    background: #fff; 
    border-radius: 10px; 
    padding: 28px; 
    box-shadow: 0 12px 30px rgba(2,6,23,.06); 
    height: 100%; 

    /* New styles to center all card content */
    display: flex;
    flex-direction: column;   /* Stack items from top to bottom */
    align-items: center;       /* Center items horizontally */
    text-align: center;        /* Center paragraph and title text */
}

.mv-icon { 
    width: 80px; 
    height: 80px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 12px; 
    background: #f3f6ff; 
    color: var(--darkblue); 
    font-size: 35px; 
    margin-bottom: 12px; 

}

.mv-title { 
    color: var(--darkblue); 
    font-weight: 800; 
    margin-bottom: 8px; 
    font-size: 28px;
}

.mv-text { 
    color: #444; 
    line-height: 1.6; 
}

/* Card Transition Mechanics */
.contact-profile-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    border-radius: 8px;
    overflow: hidden;
}

/* Card Header Default Setup */
.contact-profile-card .card-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Base Card Body Formatting */
.contact-profile-card .card-body {
    background-color: #ffffff;
    transition: all 0.35s ease;
}

/* Standardized profile photo styling matching image aspect ratio */
.profile-img-container {
    background-size: cover;
    background-position: center;
    border: 3px solid #f8f9fa;
    transition: all 0.35s ease;
}

.tracking-wider {
    letter-spacing: 0.5px;
}

/* INTERACTIVE CARD HOVER STATES */
.contact-profile-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(11, 27, 61, 0.12) !important;
}

/* Optional background shift for the profile text card on hover */
.contact-profile-card:hover .card-body {
    background-color: #fafbfc;
}

/* Highlighting photo borders subtly on active card interaction */
.contact-profile-card:hover .profile-img-container {
    border-color: #0B1B3D;
    transform: scale(1.02);
}
/* ==========================================================================
   INTERACTIVE IMMERSIVE PRELOADER CANVAS SCREEN SYSTEM
   ========================================================================== */

/* Main Fullscreen Blocking Panel Grid Canvas Setup */
.custom-preloader-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #888; /* Inherits your primary brand dark navy color token */
  z-index: 9999999 !important; /* Locks screen overlay securely above sticky elements */
  overflow: hidden;
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
}

/* Structural utility assigned via JS to reveal main underlying layout page assets */
.custom-preloader-canvas.dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- STAGE 1: WAVING T-SHIRT PURE CSS GRAPHICS VECTOR GENERATION SYSTEM --- */
/* --- ENLARGED VECTOR SVG FABRIC WAVING CORE SYSTEM --- */
.hanger-tshirt-stage {
  position: relative;
  width: 260px;  /* Significant prominent enlargement increase profile */
  height: 260px;
  margin: 0 auto;
}

.waving-svg-canvas {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Base static positioning coordinates configuration rules */
.hanger-assembly-group {
  transform-origin: 200px 132px;
}

/* Advanced Multi-Stage Wind Breeze Physics Ripple Engine */
.tshirt-fabric-group {
  transform-origin: 200px 150px;
  /* Drives persistent fluid horizontal skewing alongside organic vertical scaling loops */
  animation: svgFabricBreezeLoop 3.2s ease-in-out infinite alternate;
}

@keyframes svgFabricBreezeLoop {
  0% {
    transform: rotate(0deg) skewX(0deg) scaleY(1);
  }
  33% {
    transform: rotate(2.5deg) skewX(4deg) scaleY(0.97) scaleX(1.02);
  }
  66% {
    transform: rotate(-3deg) skewX(-3deg) scaleY(1.03) scaleX(0.98);
  }
  100% {
    transform: rotate(5deg) skewX(6deg) scaleY(0.96) scaleX(1.04);
  }
}

/* Geometric Hanger Top Wire Hook Placement */
.hanger-hook {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-bottom: none;
  border-radius: 50% 50% 0 0;
}

/* Geometric Hanger Shoulder Support Rod Bar Base */
.hanger-bar {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background-color: #ffffff;
}

/* High-End Gentle Breeze Waving T-Shirt Component Core Rendering Engine */
.waving-tshirt {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 70px;
  height: 80px;
  background-color: #ffffff; /* Default clean fabric white */
  margin-left: -35px;
  border-radius: 2px;
  clip-path: polygon(15% 0%, 25% 15%, 75% 15%, 85% 0%, 100% 20%, 85% 30%, 85% 100%, 15% 100%, 15% 30%, 0% 20%);
  
  /* Invokes organic, asymmetrical undulating looping wave keyframe timeline transformations */
  animation: windBreezeWavingLoop 3s ease-in-out infinite alternate;
  transform-origin: top center;
  box-shadow: inset 0 -15px 30px rgba(13, 37, 110, 0.05);
}

@keyframes windBreezeWavingLoop {
  0% {
    transform: rotate(0deg) skewX(0deg) scaleY(1);
    border-radius: 2px;
  }
  33% {
    transform: rotate(2deg) skewX(3deg) scaleY(0.98);
  }
  66% {
    transform: rotate(-3deg) skewX(-2deg) scaleY(1.02);
  }
  100% {
    transform: rotate(4deg) skewX(4deg) scaleY(0.97);
    /* Distorts lower hem boundary slightly to replicate true fabric wind physics fluid flow */
    clip-path: polygon(15% 0%, 25% 15%, 75% 15%, 85% 0%, 100% 20%, 85% 30%, 82% 100%, 18% 97%, 15% 100%, 0% 20%);
  }
}

/* --- STAGE 2: BRAND LOGO ANIMATED REVEAL APPEARANCE ENTRANCE PANEL --- */
.preloader-brand-logo {
  height: clamp(50px, 6vw, 65px);
  width: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(15px);
  animation: structuralStaggeredFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.5s; /* Fires sequence layout immediately after initialization entry */
}

/* --- STAGE 3: CATEGORICAL MULTI-TEXT PHRASE TYPOGRAPHY MANIFESTATION CONTROLS --- */
.staggered-text-manifest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.manifest-word {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 1px;
  opacity: 0;
  transform: translateY(15px);
  animation: structuralStaggeredFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.manifest-divider {
  color: #ff7a00; /* Custom identity orange highlight color tag element splitter node */
  font-weight: 700;
  opacity: 0;
  animation: structuralSimpleFade 0.5s ease forwards;
}

/* Sets precise chronological sequence staggering matrix for text string array reveal elements */
.staggered-text-manifest .manifest-word:nth-child(1) { animation-delay: 1.2s; }
.staggered-text-manifest .manifest-divider:nth-child(2) { animation-delay: 1.5s; }
.staggered-text-manifest .manifest-word:nth-child(3) { animation-delay: 1.7s; }
.staggered-text-manifest .manifest-divider:nth-child(4) { animation-delay: 2.0s; }
.staggered-text-manifest .manifest-word:nth-child(5) { animation-delay: 2.2s; }

/* --- STAGE 4: MAIN CONTROL BUTTON INTERACTIVE CONTAINER --- */
.btn-entrance-action {
  background-color: #ff7a00 !important; /* Premium branding identity orange background profile fill */
  color: #ffffff !important;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 1rem 2.5rem;
  border-radius: 4px;
  border: none !important;
  opacity: 0;
  transform: scale(0.95);
  animation: structuralButtonPopEntrance 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: 2.8s; /* Appears last to guide user forward into underlying website assets cleanly */
  transition: all 0.25s ease-in-out !important;
}

.btn-entrance-action:hover {
  background-color: #e06c00 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(255, 122, 0, 0.3);
}

/* --- MOTION LIBRARY TIMELINE ANCHORS KEYFRAME DICTIONARY --- */
@keyframes structuralStaggeredFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes structuralSimpleFade {
  to { opacity: 0.6; }
}

@keyframes structuralButtonPopEntrance {
  to {
    opacity: 1;
    transform: scale(1);
  }
}