/* =========================
   Unified Font Styling: Lato Everywhere
   ========================= */
:root {
  --font-main: 'Lato', sans-serif;
}
body, html, h1, h2, h3, h4, h5, h6, p, blockquote, li, button, input, textarea, select, .paragraph-lg, .paragraph-xl, .paragraph-sm, .paragraph-xxl, .detail-text-bold, .utility-text-justify {
  font-family: var(--font-main) !important;
}

/* =========================
   Responsive Overrides - Cleaned & Organized
   ========================= */

/* 1. Universal box-sizing and image scaling */
*, *::before, *::after {
  box-sizing: border-box;
}
img, .image, .cover-image, .cardcoverimage {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

/* 2. Base HTML & Body */
html, body {
  width: 100vw !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* 3. Typography */
h1, .h1-heading { font-size: clamp(2rem, 5vw, 3.5rem); }
h2, .h2-heading { font-size: clamp(1.5rem, 4vw, 2.5rem); }
h3, .h3-heading { font-size: clamp(1.2rem, 3vw, 2rem); }
h4, .h4-heading { font-size: clamp(1rem, 2.5vw, 1.5rem); }
p, .paragraph-lg, .paragraph-xl, .paragraph-sm, .paragraph-xxl {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
}
.detail-text-bold { font-weight: 700 !important; }
.utility-text-justify { text-align: justify; }

/* 4. Container & Section Padding */
.container, .section {
  padding-left: 5vw;
  padding-right: 5vw;
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
}
@media (max-width: 767px) {
  .container, .section { padding-left: 3vw; padding-right: 3vw; /* margin-top: -3rem; */ }
}
@media (max-width: 479px) {
  .container, .section { padding-left: 2vw; padding-right: 2vw; /* margin-top: -3rem; */ }
}

/* 5. Grid & Flex Layouts */
.grid-layout { display: grid !important; gap: 2rem; }
.flex-horizontal, .flex-vertical { display: flex !important; flex-wrap: wrap; gap: 1rem; }
.flex-horizontal { flex-direction: row; }
.flex-vertical { flex-direction: column; }

/* Responsive grid columns */
@media (max-width: 991px) {
  .grid-layout[class*="desktop-"] { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .grid-layout { grid-template-columns: 1fr !important; gap: 1.2rem; }
}

/* 6. Navigation & Menu */
.w-nav-menu, .nav-menu-full-page {
  width: 100vw;
  max-width: 100vw;
  left: 0; right: 0;
}
@media (max-width: 991px) {
  .w-nav-menu, .nav-menu-full-page {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--ai-gen-82921b10-4b39-48f0-b346-808cf4903d29-1740991264881---background-color--bg-primary, #fff);
  }
}

/* 7. Utility Classes */
[class*="utility-width-"] { width: 100% !important; max-width: 100% !important; }
[class*="utility-height-"] { height: auto !important; max-height: 100vh !important; }
[class*="utility-margin-"] { margin-left: 0 !important; margin-right: 0 !important; }

/* 8. Buttons & Forms */
.button, .w-button {
  font-size: clamp(1rem, 2vw, 1.2rem);
  padding: 0.75em 1.5em;
  border-radius: 0.5em;
}
input, textarea, select {
  font-size: 1em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 9. Remove unwanted horizontal scroll on all elements */
body, html, .container, .section, .w-nav-menu, .nav-menu-full-page {
  overflow-x: hidden !important;
}

/* 10. Mobile Stacking for Lists, Cards, Blocks */
@media (max-width: 767px) {
  .w-row, .w-col, .card, .button-group, .sg-selector-wrapper-x {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .accordion-title-mobile-margin {margin-top: -2rem !important;}
}

/* 11. Two-Column Layouts */
.two-column-layout { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; margin-bottom: 2rem; }
.two-column-layout .column { flex: 1 1 0; min-width: 300px; }
@media (max-width: 767px) {
  .two-column-layout { flex-direction: column; gap: 1rem; }

}

/* 12. Scroll Stacking Cards */
html, body, .section, .container, .scroll-cards-container {
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
}
.utility-container-cqw { container-type: normal !important; }
.scroll-cards-container {
  min-height: 300vh !important; position: relative !important;
  padding-top: 0 !important; margin-top: 0 !important; z-index: 1 !important;
}
.scroll-card { position: sticky !important; top: 0px !important; width: 100% !important; margin-bottom: 20px !important; transition: none !important; }
.scroll-card:nth-child(1) { z-index: 1 !important; }
.scroll-card:nth-child(2) { z-index: 2 !important; }
.scroll-card:nth-child(3) { z-index: 3 !important; }
.scroll-cards-container ~ * { position: relative !important; z-index: 10 !important; background: white !important; }
.scroll-cards-container::after { content: ''; display: block; height: 40vh !important; }
.section > .container > .scroll-cards-container, .section > .container, .section { overflow: visible !important; }

/* 13. Agilité Two-Column Layout */
.agilite-row { display: flex; align-items: center; gap: 2rem; margin: 2rem 0; }
.agilite-left { flex: 0 0 220px; font-size: 1.4rem; font-weight: bold; display: flex; align-items: center; }
.agilite-right { flex: 1 1 0; }
@media (max-width: 767px) {
  .agilite-row {
    flex-direction: column;
    gap: 0.5rem;
    margin-top: -1rem; /* Pulls the row higher */
  }
  .agilite-left {
    font-size: 1.1rem;
    margin-bottom: 0rem;
    width: 100%;        /* Ensure full width for centering */
    flex-basis: auto;   /* Override desktop fixed width */
    justify-content: center; /* Center icon and text */
  }
}

/* 14. Miscellaneous Fixes */
#w-node-_23b939c4-89f1-8eaf-77af-7e11ce8b1175-ce8b1171 {
  max-width: 420px;
  width: 80%;
  height: auto;
  display: block;
}
.grid-layout, .w-layout-grid { aspect-ratio: unset !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }

/* Remove aspect ratio and overflow from parent grid and wrappers */
.grid-layout,
.w-layout-grid,
.grid-layout.desktop-3-column {
  aspect-ratio: unset !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* TODO: Standardize grid/flex layout classes. Use a single system (CSS Grid or Flexbox) for all layouts for maintainability. */
/* --- Begin: Standardize grid/flex layouts and clean up unused utility classes --- */
/* TODO: Review and remove unused utility classes below. Standardize to CSS Grid for main layouts. Remove duplicate/conflicting rules. */
/* --- End: Standardize grid/flex layouts and clean up unused utility classes --- */

/* --- BEGIN: Deeper Cleanup of Utility Classes --- */
/* --- End: Standardize grid/flex layouts and clean up unused utility classes --- */

@media (max-width: 600px) {
  .w-tab-menu {
    margin-top: 0 !important;   /* Reduce as needed */
    padding-top: 0 !important;
    /* New rules for stacking */
    display: flex !important; /* Ensure flex display */
    flex-direction: column !important; /* Stack items vertically */
    width: 100% !important; /* Ensure tab menu itself is full width */
    align-items: stretch !important; /* Make items take full width */
  }
  .w-tab-menu .w-tab-link { /* Targeting .w-tab-link inside .w-tab-menu */
    width: 100% !important; /* Ensure each tab link takes full width */
    box-sizing: border-box !important; /* Include padding and border in the element's total width and height */
    margin-right: 0 !important; /* Remove any right margin */
    margin-left: 0 !important; /* Remove any left margin */
    margin-bottom: -2rem !important; /* Further reduced space between stacked tabs */
    padding: 0.8em 1em !important; /* Adjust padding as needed */
    text-align: center !important; /* Center the text within the tab */
    white-space: normal !important; /* Ensure text wraps */
  }
  .w-tab-menu .w-tab-link h4 {
      white-space: normal !important; /* Ensure text wraps in h4 */
      word-break: break-word !important; /* Help with long words */
      font-size: clamp(1rem, 2.5vw, 1.2rem); 
  }
  .w-tab-menu .w-tab-link:last-child {
    margin-bottom: 0 !important; /* No margin for the last tab */
  }

  /* If there is a parent adding space, target it too */
  .w-tabs {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* === Feature Cards Section (Custom Home Cards) === */
.feature-cards-section {
  margin-top: -4rem;
  width: 100%;
  padding: 3rem 0;
  background: transparent;  
}
.feature-cards-container {
  display: flex !important;
  gap: 2rem !important;
  justify-content: center !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
}
.feature-card {
  background: #fff !important;
  border-radius: 1.2rem !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10), 0 1.5px 6px rgba(0,0,0,0.06) !important;
  padding: 2rem 1.5rem 2.5rem 1.5rem !important;
  max-width: 350px !important;
  min-width: 260px !important;
  flex: 1 1 300px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1), transform 0.3s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform, box-shadow !important;
  opacity: 1 !important;
  transform: none !important;
}
.feature-card:hover, .feature-card:focus-within {
  box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 3px 12px rgba(0,0,0,0.10) !important;
  transform: scale(1.035) translateY(-4px) !important;
  z-index: 2 !important;
}
.feature-card-image {
  width: 100% !important;
  max-width: 180px !important;
  border-radius: 0.8rem !important;
  margin-bottom: 1.2rem !important;
}
.feature-card-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.7rem !important;
  text-align: center !important;
}
.feature-card-desc {
  font-size: 1.05rem !important;
  color: #444 !important;
  margin-bottom: 1.5rem !important;
  margin-top: 2rem !important;
  text-align: center !important;
}
.feature-card-btn {
  display: inline-block !important;
  background: #FF4B1F !important;
  color: #fff !important;
  padding: 0.7em 1.5em !important;
  border-radius: 0.5em !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
  margin-top: auto !important;
}
.feature-card-btn:hover, .feature-card-btn:focus {
  background: #d63c13 !important;
}


@media (max-width: 900px) {

  .bold-text {
    font-size: clamp(1rem, 2.5vw, 1.2rem); 
  }

  .agilite-row {
    margin-bottom: -1rem !important;
  } 

  .feature-cards-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 2rem !important;
  }
  .feature-card {
    max-width: 85vw !important;
    min-width: 0 !important;
  }
  /* Hide cards only if menu is open (example: .main-navbar.menu-open) */
  .main-navbar.menu-open ~ main .feature-card {
    opacity: 0 !important;
  }
}

/* Modern Sticky Main Navigation Bar */
.main-navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1002;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 5vw;
  transition: box-shadow 0.3s cubic-bezier(.4,0,.2,1), background 0.3s cubic-bezier(.4,0,.2,1);
}
.main-navbar .nav-logo {
  display: flex !important;
  align-items: center !important;
  font-weight: 700 !important;
  font-size: 1.3rem !important;
  color: #FF4B1F !important;
  text-decoration: none !important;
  gap: 0.7rem !important;
  letter-spacing: 0.03em !important;
  transition: color 0.2s !important;
  font-family: var(--font-main, 'Lato', sans-serif) !important;
}
.main-navbar .nav-logo svg {
  width: 2.2rem;
  height: 2.2rem;
  display: block;
}

@media (max-width: 900px) {
  .main-navbar {
    padding: 0.5rem 2vw;
  }
  .main-navbar .main-nav-links {
    gap: 1.2rem;
  }
}

/* Remove any legacy or unused font-family rules below this point */

/* Accordion Trigger Full Width */
.accordion-trigger {
  width: 100% !important; /* Make the button take full width */
  display: flex !important; /* Use flex for internal alignment */
  justify-content: flex-start !important; /* Align text to the start (left) */
  align-items: center !important; /* Keep vertical centering */
  padding-left: 1em !important; /* Add some padding so text isn't at the very edge */
  padding-right: 1em !important; /* Add some padding so text isn't at the very edge */
  box-sizing: border-box !important; /* Include padding/border in width calculation */
  text-align: left !important; /* Ensure text itself is left-aligned if it's not inheriting */
}

/* === Active Tab Styling === */
.w-tab-link.w--current {
  background-color: #FF4B1F;
  color: var(--ai-gen-82921b10-4b39-48f0-b346-808cf4903d29-1740991264881---core-accent-color--accent-primary) !important; /* Solid orange text */
  border-radius: 8px !important; /* Rounded corners */
  text-decoration: underline !important;
  text-decoration-color: var(--ai-gen-82921b10-4b39-48f0-b346-808cf4903d29-1740991264881---core-accent-color--accent-primary) !important; /* Orange underline */
  border-bottom: none !important; /* Remove default bottom border */
}

/* === Reduce top space above specific tab sections on mobile === */
@media (max-width: 767px) {
  section[data-record-id="8e08c42a-ea45-e482-0613-b4daf45e5315"] {
    padding-top: 20px !important;
    margin-top: 0 !important;
  }
}

/* === reCAPTCHA Styling === */
.g-recaptcha {
  margin: 15px 0;
  display: flex;
  justify-content: center;
}

/* Ensure reCAPTCHA is responsive on mobile */
@media (max-width: 767px) {
  .g-recaptcha {
    transform: scale(0.9);
    transform-origin: center;
    margin: 10px 0;
  }
}

/* === Contact Form Container Styling === */
.contact-form-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

/* === Contact Form Submit Button Styling === */
.contact-submit-btn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background-color: #FF4B1F; /* Orange color */
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.contact-submit-btn:hover {
  background-color: #e6441a; /* Darker orange on hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 75, 31, 0.3);
}

.contact-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 75, 31, 0.3);
}

.contact-submit-btn:disabled {
  background-color: #ccc !important;
  cursor: not-allowed !important;
  transform: none;
  box-shadow: none;
  opacity: 0.7;
}

/* Form validation visual feedback */
.contact-submit-btn:not(:disabled) {
  animation: buttonPulse 2s infinite;
}

@keyframes buttonPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 75, 31, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255, 75, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 75, 31, 0); }
}

/* Mobile specific styling for contact submit button */
@media (max-width: 767px) {
  .contact-submit-btn {
    padding: 14px 20px;
    font-size: 18px;
    margin-top: 15px;
  }
}

/* === Reduce gap above contact form on business-informations.html for mobile === */
@media (max-width: 767px) {
  .calendly-inline-widget {
    height: 600px !important;
  }
}

/* === Ensure contact form inputs span full mobile screen width by removing grid cell padding === */
@media (max-width: 767px) {
  #w-node-_6dd82fed-fcd9-4a8c-7e32-3c165081de39-5081de36.w-node-e228b28e-8584-af10-3c53-f84da41c3d89-b3732151 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767px) {
  header#contact-form .full-width-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Form Input Fields */
  #email-form .w-input,
  #email-form textarea.w-input { /* Added textarea */
    height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-size: 16px !important;
    width: 100% !important; /* Take full available width */
    box-sizing: border-box !important; /* Include padding and border in the element's total width and height */
  }
}

/* === Basic Form Styling for Mobile === */
@media (max-width: 767px) {
  /* Basic styling for the form itself */
  form#email-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between form elements */
    padding: 0 15px; /* Add some padding to the form itself to prevent edge-to-edge */
    width: 100%; /* Ensure form takes full width */
    box-sizing: border-box; /* Include padding in width */
  }

  /* Style for labels */
  form#email-form label {
    display: block; /* Ensure labels are block elements */
    font-weight: bold;
    margin-bottom: 5px; /* Space between label and input */
    width: 100%; /* Ensure labels take full width */
    box-sizing: border-box; /* Include padding in width */
  }

  /* More assertive style for input fields and textarea to ensure full width */
  header#contact-form form#email-form input[type="text"],
  header#contact-form form#email-form input[type="email"],
  header#contact-form form#email-form textarea {
    display: block !important; /* Force block display */
    width: 100% !important; /* Force full width */
    max-width: 100% !important; /* Ensure max-width doesn't restrict */
    padding: 10px !important; /* Ensure padding is applied */
    border: 1px solid #ccc !important; /* Basic border */
    border-radius: 4px !important; /* Slightly rounded corners */
    box-sizing: border-box !important; /* Ensure box-sizing */
    font-size: 16px !important; /* Readable font size */
    margin-left: 0 !important; /* Remove horizontal margins */
    margin-right: 0 !important; /* Remove horizontal margins */
  }

  /* Style for the submit button */
  form#email-form input[type="submit"],
  form#email-form .contact-submit-btn {
    display: block; /* Make button take full width */
    width: 100%; /* Full width */
    padding: 14px 20px; /* Padding inside button */
    background-color: #FF4B1F; /* Orange background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 6px; /* Rounded corners */
    cursor: pointer; /* Indicate clickable */
    font-size: 18px; /* Larger font size */
    font-weight: 600; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 0.5px; /* Letter spacing */
    margin-top: 15px; /* Space above button */
    transition: all 0.3s ease; /* Smooth transitions */
  }

  /* Hover effect for mobile */
  form#email-form input[type="submit"]:hover,
  form#email-form .contact-submit-btn:hover {
    background-color: #e6441a; /* Darker orange on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 31, 0.3);
  }

  /* Disabled state */
  form#email-form input[type="submit"]:disabled,
  form#email-form .contact-submit-btn:disabled {
    background-color: #ccc !important;
    cursor: not-allowed !important;
    transform: none;
    box-shadow: none;
  }

  /* reCAPTCHA styling for mobile */
  form#email-form .g-recaptcha {
    transform: scale(0.85);
    transform-origin: center;
    margin: 10px 0;
  }

  /* Clean up old Webflow-specific styles if they exist */
  /* These styles are likely overridden by the more specific rule above, but kept for clarity */
  #email-form .w-input,
  #email-form textarea.w-input {
      width: 100% !important;
      box-sizing: border-box !important;
  }

  /* Remove previous Webflow form container padding fix */
  header#contact-form .full-width-container {
     padding-left: 0 !important;
     padding-right: 0 !important;
  }

  /* Explicitly set padding on the grid cell containing the form to zero */
  header#contact-form #w-node-_6dd82fed-fcd9-4a8c-7e32-3c165081de39-5081de36.w-node-e228b28e-8584-af10-3c53-f84da41c3d89-b3732151 {
     padding-left: 0 !important;
     padding-right: 0 !important;
  }

  /* Explicitly set padding on the form block wrapper to zero */
   header#contact-form .form-block {
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* Ensure no padding on the grid layout container */
   header#contact-form .w-layout-grid.grid-layout {
       padding-left: 0 !important;
       padding-right: 0 !important;
   }
}

/* === Accordion Content Full Width on Mobile === */
@media (max-width: 767px) {
  .accordion {
    width: 100%;
  }

  .accordion .accordion-item .content {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    background-color: white; /* Assuming a white background for the content area */
  }

  .accordion .accordion-item .content .portfolio-content-grid {
    width: 100%;
    max-width: 100%;
  }
}

/* Force 1rem margin-bottom for h4-headings with utility class */
.h4-heading.utility-margin-bottom-1rem {
    margin-bottom: 1.5rem !important;
}

/* Styling for the certification icon */
.certification-icon {
    max-width: 40px; /* Adjust as needed */
    height: auto;    /* Maintain aspect ratio */
    display: block;  /* Ensures proper block-level behavior for an image if not already flexed */
}

@media (min-width: 992px) {
  .card-body {
    font-size: 1.15rem; /* Approx 18.4px */
  }
}

/* 
  ==============================================
  SPECIFIC TEXT ALIGNMENT FOR LISTS
  ==============================================
  Purpose: Ensures lists within a justified text block 
           are left-aligned for better readability.
*/
.portfolio-text ul {
  text-align: left;
}