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

.afm-logo img {
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  width: clamp(10rem, 26vw, 14.5rem);
}

.fs-5 {
  font-size: 1.1rem !important;
}

.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;
}

.bg-light-grey {
  background-color: #f1f1f1 !important;
}

.rounded-4 {
  border-radius: 2rem !important;
}

.shadow {
  box-shadow: 0 .1rem 1rem rgba(0, 0, 0, .12) !important;
}

@view-transition {
  navigation: auto;
}

/* ==========================================================================
   Home Hero Banner
   ========================================================================== */

.hero-banner-img {
  display: block;
  height: 380px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .hero-banner-img {
    height: 450px;
  }
}

/* Darkens the bottom-left of the photo so white headline/subtext stay readable */
.hero-banner-scrim {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 80%);
}

/* ==========================================================================
   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) {
  .p-md-5 {
    padding: 2.2rem !important;
  }

  .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%);
}

.bg-machines-blue {
  background-color: #0071e3;
}

.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;
}

/* @media (min-width: 1200px) {
  .navbar .container,
  .navbar .container-lg,
  .navbar .container-md,
  .navbar .container-sm,
  .navbar .container-xl {
    max-width: 1140px;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
  }
} */