html,
body {
  font-family: 'Helvetica', -apple-system, BlinkMacSystemFont;
  ;
}

.fs-9 {
  font-size: 9px;
}

.fs-10 {
  font-size: 10px;
}

.fs-12 {
  font-size: 12px;
}

.fs-14 {
  font-size: 14px;
}

.fs-16 {
  font-size: 16px;
}

.link-no-deco {
  text-decoration: none !important;
  color: initial !important;
}

.nav-link.banner {
  padding: 0 !important;
}

@view-transition {
  navigation: auto;
}

/* ==========================================================================
   Machines Landing Page Custom Layout Rules
   ========================================================================== */

/* 1. Dynamic Card Position Overlap Controller Class */
/* On Mobile phones: Sits safely right below image with an intentional clean space gap */
.custom-floating-card-wrapper {
  position: relative;
  z-index: 5;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* On Desktop Screens (768px and up): Shifts upward precisely 50% to split the border line */
@media (min-width: 768px) {
  .custom-floating-card-wrapper {
    margin-top: -65px;
    /* Pulls exactly half the card container profile over the image */
    margin-bottom: 45px;
    /* Creates clean breathing space for the benefit blocks down below */
  }

  /* Grid Divider Vertical Borders */
  .border-start-md {
    border-left: 1px solid #dee2e6 !important;
  }

  .border-end-md {
    border-right: 1px solid #dee2e6 !important;
  }

  /* True 20% Flex Grid Width Distribution Profile */
  .col-custom-5 {
    width: 20% !important;
    max-width: 20%;
  }

  /* True 5-Step Process Timeline Step Item Width Profiles */
  .step-item {
    width: 16% !important;
  }

  .step-arrow {
    width: 4% !important;
  }
}

/* Mobile Component Styling Tweaks */
@media (max-width: 767.98px) {

  /* Rotates process workflow arrows straight down for natural mobile page scrolling flows */
  .rotate-mobile-90 {
    transform: rotate(90deg);
    margin: 12px 0;
    display: inline-block;
  }
}

/* Clean Element Border Profiles */
.rounded-4 {
  border-radius: 1rem !important;
}

/* ==========================================================================
   About Us Clean Layout Grid Rules
   ========================================================================== */

.bg-light-gradient {
  background: linear-gradient(180deg, #fdfdfd 0%, #f8f9fa 100%);
}

.value-icon-wrapper {
  width: 56px;
  height: 56px;
  background-color: #f0f5ff;
  /* Soft blue icon round background backdrop */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop Only Responsive Sizing & Borders (>= 768px Viewports) */
@media (min-width: 768px) {

  /* Thin vertical column splits */
  .border-start-md {
    border-left: 1px solid #dee2e6 !important;
  }

  /* Forces columns to maintain exactly 20% width tracks without text wrapping artifacts */
  .col-custom-5 {
    width: 20% !important;
    max-width: 20%;
  }
}

/* ==========================================================================
   Contact Us Page Custom Stylesheet Specifications
   ========================================================================== */

/* 1. Global Page Background Layout Glow Effect */
.contact-page-wrapper {
  background-color: #ffffff;
  /* Soft cyan radial blur gradient mirroring the top-left design accent glow */
  background-image: radial-gradient(circle at 5% 15%, rgba(204, 229, 255, 0.35) 0%, rgba(255, 255, 255, 0) 40%);
  background-repeat: no-repeat;
}

/* 2. Left Details Block Decoration Support Classes */
.style-normal {
  font-style: normal !important;
}

.contact-icon-box {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1a4ba5 !important;
  /* Premium brand navy blue icon theme base colour */
}

/* 3. Dark Right Corporate Form Card Panel Element Wrapper */
.custom-contact-card {
  background-color: #192546;
  /* True deep premium midnight blue card background profile fill */
}

/* 4. Form Control Element Overrides */
.custom-form-input {
  background-color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 0.75rem !important;
  /* Thick modern rounded structural frames */
  padding: 0.65rem 1rem !important;
  color: #212529 !important;
  transition: all 0.2s ease-in-out;
}

.custom-form-input:focus {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25) !important;
  outline: 0 !important;
}

/* Custom Textarea adjustment framework override rules */
textarea.custom-form-input {
  min-height: 90px;
  resize: vertical;
}

/* 5. Custom Form Action Submission Button Classes */
.custom-submit-btn {
  background-color: #4f819a !important;
  /* Soft muted slate teal color match profile */
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  transition: background-color 0.15s ease-in-out;
}

.custom-submit-btn:hover,
.custom-submit-btn:focus {
  background-color: #3f687d !important;
  color: #ffffff !important;
}

/* 6. Border Radius helper utility */
.rounded-5 {
  border-radius: 1.75rem !important;
}