/* Header Navigation Styling */
.header {
    padding: 10px 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
  
  .header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  /* Logo styling - keep on the left */
  .header__logo {
    display: flex;
    align-items: center;
  }
  
  .header__img {
    width: 40px;
    height: auto;
    margin-right: 10px;
  }
  
  .header__title {
    font-size:16px;
    font-weight: 100px;
    margin: 0;
    line-height: 1.2;
  }
  
  /* Navigation Menu Styling - position on the right */
  .header__menu {
    display: flex;
    align-items: center;
    margin-left: auto; /* Push to the right */
  }
  
  .header__nav {
    display: block;
  }
  
  /* Make navigation items horizontal */
  .header__elenco {
    display: flex;
    flex-direction: row; /* Explicitly set horizontal layout */
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .header__el {
    margin: 0 10px;
  }
  
  .header__link {
    font-size: 1rem;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
  }
  
  .header__link:hover {
    color: #478ac9;
  }
  
  /* Fix the collapse class */
  .header__nav.collapse {
    display: block !important;
  }
  
  /* Responsive styles */
  @media (max-width: 768px) {
    .header__container {
      flex-direction: column;
      align-items: center;
    }
    
    .header__menu {
      margin-top: 15px;
      margin-left: 0; /* Reset the auto margin on mobile */
    }
    
    .header__elenco {
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .header__el {
      margin: 5px;
    }
  }

.u-section-1 .u-sheet-1 {
    min-height: 344px;
  }
  
  .u-section-1 .u-text-1 {
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    margin: 60px auto;
  }
  
  @media (max-width: 767px) {
    .u-section-1 .u-sheet-1 {
      min-height: 256px;
    }
  } .u-section-2 {
    background-image: none;
  }
  
  .u-section-2 .u-sheet-1 {
    min-height: 498px;
  }
  
  .u-section-2 .u-list-1 {
    grid-template-rows: repeat(1, auto);
    margin-top: 60px;
    margin-bottom: 0;
  }
  
  .u-section-2 .u-repeater-1 {
    grid-template-columns: repeat(4, calc(25% - 24px));
    min-height: 210px;
    grid-auto-columns: calc(25% - 24px);
    grid-gap: 32px;
  }
  
  .u-section-2 .u-list-item-1 {
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    --radius: 10px;
  }
  
  .u-section-2 .u-container-layout-1 {
    padding: 30px 20px;
  }
  
  .u-section-2 .u-icon-1 {
    width: 81px;
    height: 81px;
    margin: 0 auto;
    padding: 0;
  }
  
  .u-section-2 .u-text-1 {
    margin: 15px 0 0;
  }
  
  .u-section-2 .u-text-2 {
    margin: 35px 0 0;
  }
  
  .u-section-2 .u-list-item-2 {
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    --radius: 10px;
  }
  
  .u-section-2 .u-container-layout-2 {
    padding: 30px 20px;
  }
  
  .u-section-2 .u-icon-2 {
    width: 81px;
    height: 81px;
    margin: 0 auto;
    padding: 0;
  }
  
  .u-section-2 .u-text-3 {
    font-size: 1.5rem;
    text-transform: none;
    font-family: "Plus Jakarta Sans";
    margin: 15px 0 0;
  }
  
  .u-section-2 .u-text-4 {
    margin: 35px 0 0;
  }
  
  .u-section-2 .u-list-item-3 {
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    --radius: 10px;
  }
  
  .u-section-2 .u-container-layout-3 {
    padding: 30px 20px;
  }
  
  .u-section-2 .u-icon-3 {
    width: 81px;
    height: 81px;
    margin: 0 auto;
    padding: 0;
  }
  
  .u-section-2 .u-text-5 {
    margin: 15px 0 0;
  }
  
  .u-section-2 .u-text-6 {
    margin: 35px 0 0;
  }
  
  .u-section-2 .u-list-item-4 {
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    --radius: 10px;
  }
  
  .u-section-2 .u-container-layout-4 {
    padding: 30px 20px;
  }
  
  .u-section-2 .u-icon-4 {
    width: 81px;
    height: 81px;
    margin: 0 auto;
    padding: 0;
  }
  
  .u-section-2 .u-text-7 {
    margin: 15px 0 0;
  }
  
  .u-section-2 .u-text-8 {
    margin: 35px 0 0;
  }
  
  .u-section-2 .u-btn-1 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 1px;
    border-style: solid;
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    margin: 30px auto 60px;
    padding: 19px 49px 19px 47px;
  }
  
  @media (max-width: 1199px) {
    .u-section-2 .u-repeater-1 {
      min-height: 170px;
    }
  }
  
  @media (max-width: 991px) {
    .u-section-2 .u-repeater-1 {
      grid-template-columns: repeat(2, calc(50% - 16px));
      min-height: 586px;
      grid-auto-columns: calc(50% - 16px);
    }
  }
  
  @media (max-width: 767px) {
    .u-section-2 .u-repeater-1 {
      grid-template-columns: 100%;
      grid-auto-columns: calc(100% - 0px);
    }
  
    .u-section-2 .u-container-layout-1 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .u-section-2 .u-container-layout-2 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .u-section-2 .u-container-layout-3 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .u-section-2 .u-container-layout-4 {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  
  @media (max-width: 575px) {
    .u-section-2 .u-repeater-1 {
      grid-auto-columns: 100%;
    }
  }.u-section-3 .u-sheet-1 {
    min-height: 568px;
  }
  
  .u-section-3 .u-text-1 {
    text-transform: uppercase;
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    margin: 60px auto 0;
  }
  
  .u-section-3 .u-text-2 {
    font-size: 4.5rem;
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    margin: 20px 0 0;
  }
  
  .u-section-3 .u-text-3 {
    line-height: 1.8;
    width: 822px;
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    margin: 30px auto 0;
  }
  
  .u-section-3 .u-text-4 {
    width: 822px;
    margin: 20px auto 0;
  }
  
  .u-section-3 .u-text-5 {
    width: 822px;
    margin: 20px auto 60px;
  }
  
  @media (max-width: 991px) {
    .u-section-3 .u-text-3 {
      width: 720px;
    }
  
    .u-section-3 .u-text-4 {
      width: 720px;
    }
  
    .u-section-3 .u-text-5 {
      width: 720px;
    }
  }
  
  @media (max-width: 767px) {
    .u-section-3 .u-text-2 {
      font-size: 2.689450183413862rem;
    }
  
    .u-section-3 .u-text-3 {
      width: 540px;
    }
  
    .u-section-3 .u-text-4 {
      width: 540px;
    }
  
    .u-section-3 .u-text-5 {
      width: 540px;
    }
  }
  
  @media (max-width: 575px) {
    .u-section-3 .u-text-2 {
      font-size: 2.2412084861782184rem;
    }
  
    .u-section-3 .u-text-3 {
      width: 340px;
    }
  
    .u-section-3 .u-text-4 {
      width: 340px;
    }
  
    .u-section-3 .u-text-5 {
      width: 340px;
    }
  } .u-section-4 {
    background-image: none;
    min-height: 778px;
  }
  
  .u-section-4 .u-text-1 {
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    animation-timing-function: ease-in-out;
    font-size: 3.7647117647058828rem;
    margin: 60px auto 0;
  }
  
  .u-section-4 .u-text-2 {
    width: 719px;
    animation-timing-function: ease-in-out;
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 1;
    margin: 30px auto 0;
  }
  
  .u-section-4 .u-btn-1 {
    background-image: none;
    font-weight: 400;
    padding: 0;
  }
  
  .u-section-4 .u-list-1 {
    grid-template-rows: repeat(1, auto);
    margin-top: 40px;
    margin-bottom: 0;
  }
  
  .u-section-4 .u-repeater-1 {
    grid-template-columns: repeat(5, calc(20% - 12.8px));
    min-height: 333px;
    grid-auto-columns: calc(20% - 12.8px);
    grid-gap: 16px;
  }
  
  .u-section-4 .u-image-1 {
    background-image: url("/src/Content/Images/logo_vert.png");
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 300px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 1;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }
  
  .u-section-4 .u-container-layout-1 {
    padding: 30px 30px 40px;
  }
  
  .u-section-4 .u-group-1 {
    box-shadow: 2px 0 0 0 rgba(0,0,0,0);
    min-height: 116px;
    margin-top: 0;
    margin-bottom: 0;
    transition-duration: 0.5s;
    transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
  }
  
  .u-section-4 .u-container-layout-2 {
    padding: 10px;
  }
  
  .u-section-4 .u-text-3 {
    font-size: 1.23529rem;
    margin: 0;
  }
  
  .u-section-4 .u-image-2 {
    background-image: url("/src/Content/Images/ClientCommandLogo.png");
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 300px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 1;
     background-position: center center !important;
  background-size: contain !important; /* ensure it scales inside box */
  background-repeat: no-repeat !important;
  }

  
  
  .u-section-4 .u-container-layout-3 {
    padding: 30px 30px 40px;
  }
  
  .u-section-4 .u-group-2 {
    box-shadow: 2px 0 0 0 rgba(0,0,0,0);
    min-height: 116px;
    margin-top: 0;
    margin-bottom: 0;
    transition-duration: 0.5s;
    transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
  }
  
  .u-section-4 .u-container-layout-4 {
    padding: 10px;
  }
  
  .u-section-4 .u-text-4 {
    font-size: 1.23529rem;
    margin: 0;
  }
  
  .u-section-4 .u-image-3 {
    background-image: url("/src/Content/Images/AlphaWarrantyLogo.png");
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 300px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 1;
     background-position: center center !important;
  background-size: contain !important; /* ensure it scales inside box */
  background-repeat: no-repeat !important;
  }
  
  .u-section-4 .u-container-layout-5 {
    padding: 30px 30px 40px;
  }
  
  .u-section-4 .u-group-3 {
    box-shadow: 2px 0 0 0 rgba(0,0,0,0);
    min-height: 116px;
    margin-top: 0;
    margin-bottom: 0;
    transition-duration: 0.5s;
    transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
  }
  
  .u-section-4 .u-container-layout-6 {
    padding: 10px;
  }
  
  .u-section-4 .u-text-5 {
    font-size: 1.23529rem;
    margin: 0;
  }
  
  .u-section-4 .u-image-4 {
    background-image: url("/src/Content/Images/CilajetLogo.png");
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 300px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 1;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }
  
  
  .u-section-4 .u-container-layout-7 {
    padding: 30px 30px 40px;
  }
  
  .u-section-4 .u-group-4 {
    box-shadow: 2px 0 0 0 rgba(0,0,0,0);
    min-height: 116px;
    margin-top: 0;
    margin-bottom: 0;
    transition-duration: 0.5s;
    transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
  }
  
  .u-section-4 .u-container-layout-8 {
    padding: 10px;
  }
  
  .u-section-4 .u-text-6 {
    font-size: 1.23529rem;
    margin: 0;
  }
  
  .u-section-4 .u-image-5 {
    background-image: url("/src/Content/Images/karcher-sq.png");
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 300px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 1;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }
  
  .u-section-4 .u-container-layout-9 {
    padding: 30px 30px 40px;
  }
  
  .u-section-4 .u-group-5 {
    box-shadow: 2px 0 0 0 rgba(0,0,0,0);
    min-height: 116px;
    margin-top: 0;
    margin-bottom: 0;
    transition-duration: 0.5s;
    transform: rotate(0deg) scale(1) translateX(0px) translateY(0px);
  }
  
  .u-section-4 .u-container-layout-10 {
    padding: 10px;
  }
  
  .u-section-4 .u-text-7 {
    font-size: 1.23529rem;
    margin: 0;
  }
  
  .u-section-4 .u-btn-2 {
    background-image: none;
    border-style: solid;
    font-weight: 700;
    text-transform: uppercase;
    --radius: 15px;
    font-size: 1rem;
    --animation-custom_in-translate_x: 0px;
    --animation-custom_in-translate_y: 0px;
    --animation-custom_in-opacity: 0;
    --animation-custom_in-rotate: 0deg;
    --animation-custom_in-scale: 0.3;
    letter-spacing: 1px;
    margin: 40px auto 60px;
    padding: 17px 53px 19px 51px;
  }
  
  @media (max-width: 1199px) {
    .u-section-4 .u-repeater-1 {
      min-height: 271px;
    }
  }
  
  @media (max-width: 991px) {
     .u-section-4 {
      min-height: 1192px;
    }
  
    .u-section-4 .u-text-1 {
      font-size: 3rem;
      width: auto;
      margin-left: 50px;
      margin-right: 50px;
    }
  
    .u-section-4 .u-text-2 {
      width: auto;
      margin-left: 51px;
      margin-right: 51px;
    }
  
    .u-section-4 .u-repeater-1 {
      grid-template-columns: repeat(3, calc(33.333333333333336% - 10.666666666666666px));
      min-height: 725px;
      grid-auto-columns: calc(33.333333333333336% - 10.666666666666666px);
    }
  
    .u-section-4 .u-container-layout-1 {
      padding-bottom: 30px;
    }
  
    .u-section-4 .u-text-3 {
      font-size: 1.5rem;
    }
  
    .u-section-4 .u-container-layout-3 {
      padding-bottom: 30px;
    }
  
    .u-section-4 .u-text-4 {
      font-size: 1.5rem;
    }
  
    .u-section-4 .u-container-layout-5 {
      padding-bottom: 30px;
    }
  
    .u-section-4 .u-text-5 {
      font-size: 1.5rem;
    }
  
    .u-section-4 .u-container-layout-7 {
      padding-bottom: 30px;
    }
  
    .u-section-4 .u-text-6 {
      font-size: 1.5rem;
    }
  
    .u-section-4 .u-container-layout-9 {
      padding-bottom: 30px;
    }
  
    .u-section-4 .u-text-7 {
      font-size: 1.5rem;
    }
  }
  
  @media (max-width: 767px) {
     .u-section-4 {
      min-height: 1707px;
    }
  
    .u-section-4 .u-text-1 {
      font-size: 2.25rem;
    }
  
    .u-section-4 .u-text-2 {
      margin-left: 50px;
      margin-right: 50px;
    }
  
    .u-section-4 .u-repeater-1 {
      grid-template-columns: repeat(2, calc(50% - 8px));
      min-height: 1247px;
      grid-auto-columns: calc(50% - 8px);
    }
  
    .u-section-4 .u-container-layout-1 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .u-section-4 .u-container-layout-3 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .u-section-4 .u-container-layout-5 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .u-section-4 .u-container-layout-7 {
      padding-left: 10px;
      padding-right: 10px;
    }
  
    .u-section-4 .u-container-layout-9 {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  
  @media (max-width: 575px) {
     .u-section-4 {
      min-height: 1602px;
    }
  
    .u-section-4 .u-text-1 {
      font-size: 1.875rem;
      width: 340px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .u-section-4 .u-text-2 {
      width: 340px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .u-section-4 .u-repeater-1 {
      min-height: 1129px;
    }
  
    .u-section-4 .u-container-layout-1 {
      padding: 25px;
    }
  
    .u-section-4 .u-text-3 {
      font-size: 1.23529rem;
    }
  
    .u-section-4 .u-container-layout-3 {
      padding: 25px;
    }
  
    .u-section-4 .u-text-4 {
      font-size: 1.23529rem;
    }
  
    .u-section-4 .u-container-layout-5 {
      padding: 25px;
    }
  
    .u-section-4 .u-text-5 {
      font-size: 1.23529rem;
    }
  
    .u-section-4 .u-container-layout-7 {
      padding: 25px;
    }
  
    .u-section-4 .u-text-6 {
      font-size: 1.23529rem;
    }
  
    .u-section-4 .u-container-layout-9 {
      padding: 25px;
    }
  
    .u-section-4 .u-text-7 {
      font-size: 1.23529rem;
    }
  }
  
  .u-section-4 .u-group-2,
  .u-section-4 .u-group-2:before,
  .u-section-4 .u-group-2 > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-section-4 .u-container-layout:hover .u-group-2 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-section-4 .u-group-2 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-section-4 .u-group-1,
  .u-section-4 .u-group-1:before,
  .u-section-4 .u-group-1 > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-section-4 .u-container-layout:hover .u-group-1 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-section-4 .u-group-1 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-section-4 .u-group-3,
  .u-section-4 .u-group-3:before,
  .u-section-4 .u-group-3 > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-section-4 .u-container-layout:hover .u-group-3 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-section-4 .u-group-3 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-section-4 .u-group-4,
  .u-section-4 .u-group-4:before,
  .u-section-4 .u-group-4 > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-section-4 .u-container-layout:hover .u-group-4 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-section-4 .u-group-4 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-section-4 .u-group-5,
  .u-section-4 .u-group-5:before,
  .u-section-4 .u-group-5 > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-section-4 .u-container-layout:hover .u-group-5 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-section-4 .u-group-5 {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-block-aa4a-133:not([data-block-selected]):not([data-cell-selected]),
  .u-block-aa4a-133:not([data-block-selected]):not([data-cell-selected]):before,
  .u-block-aa4a-133:not([data-block-selected]):not([data-cell-selected]) > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-container-layout:hover > .u-block-aa4a-133:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-block-aa4a-133:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-block-aa4a-135:not([data-block-selected]):not([data-cell-selected]),
  .u-block-aa4a-135:not([data-block-selected]):not([data-cell-selected]):before,
  .u-block-aa4a-135:not([data-block-selected]):not([data-cell-selected]) > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-container-layout:hover > .u-block-aa4a-135:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-block-aa4a-135:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-block-aa4a-137:not([data-block-selected]):not([data-cell-selected]),
  .u-block-aa4a-137:not([data-block-selected]):not([data-cell-selected]):before,
  .u-block-aa4a-137:not([data-block-selected]):not([data-cell-selected]) > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-container-layout:hover > .u-block-aa4a-137:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-block-aa4a-137:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-block-aa4a-139:not([data-block-selected]):not([data-cell-selected]),
  .u-block-aa4a-139:not([data-block-selected]):not([data-cell-selected]):before,
  .u-block-aa4a-139:not([data-block-selected]):not([data-cell-selected]) > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-container-layout:hover > .u-block-aa4a-139:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-block-aa4a-139:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-block-aa4a-141:not([data-block-selected]):not([data-cell-selected]),
  .u-block-aa4a-141:not([data-block-selected]):not([data-cell-selected]):before,
  .u-block-aa4a-141:not([data-block-selected]):not([data-cell-selected]) > .u-container-layout:before {
    transition-property: fill, color, background-color, stroke-width, border-style, border-width, border-top-width, border-left-width, border-right-width, border-bottom-width, custom-border, borders, box-shadow, text-shadow, opacity, border-radius, stroke, border-color, font-size, font-style, font-weight, text-decoration, letter-spacing, transform, background-image, image-zoom, background-size, background-position;
  }
  
  .u-container-layout:hover > .u-block-aa4a-141:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }
  
  .u-container-layout.hover > .u-block-aa4a-141:not([data-block-selected]):not([data-cell-selected]) {
    transform: translateX(0px) translateY(-50px) !important;
    box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
  }

/* Add these styles to adjust the vendor images */

/* Target all vendor images in section 4 */
.u-section-4 .u-image-1,
.u-section-4 .u-image-2,
.u-section-4 .u-image-3,
.u-section-4 .u-image-4,
.u-section-4 .u-image-5 {
  background-size: contain !important; /* Make images scale to fit container while maintaining aspect ratio */
  background-position: center top !important; /* Position images at the top */
  min-height: 250px; /* Set minimum height for the image containers */
  position: relative; /* For positioning child elements */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Push content to bottom */
}

/* Position the white label containers at the bottom initially */
.u-section-4 .u-group-1,
.u-section-4 .u-group-2,
.u-section-4 .u-group-3,
.u-section-4 .u-group-4,
.u-section-4 .u-group-5 {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 2; /* Ensure it's above the image */
  margin-top: auto; /* Push to bottom of flex container */
}

/* When container is hovered, move the label to middle of image */
.u-section-4 .u-container-layout:hover .u-group-1,
.u-section-4 .u-container-layout:hover .u-group-2,
.u-section-4 .u-container-layout:hover .u-group-3,
.u-section-4 .u-container-layout:hover .u-group-4,
.u-section-4 .u-container-layout:hover .u-group-5 {
  transform: translateY(-125px) !important; /* Move up to middle of image */
  box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
}

/* Override any existing transform for the hover state */
.u-container-layout.hover > .u-section-4 .u-group-1,
.u-container-layout.hover > .u-section-4 .u-group-2,
.u-container-layout.hover > .u-section-4 .u-group-3,
.u-container-layout.hover > .u-section-4 .u-group-4,
.u-container-layout.hover > .u-section-4 .u-group-5 {
  transform: translateY(-125px) !important;
  box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
}

/* Adjust container padding for better proportions */
.u-section-4 .u-container-layout-1,
.u-section-4 .u-container-layout-3,
.u-section-4 .u-container-layout-5,
.u-section-4 .u-container-layout-7,
.u-section-4 .u-container-layout-9 {
  padding: 20px 20px 0; /* Remove bottom padding */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make sure the images maintain proper sizing on mobile */
@media (max-width: 768px) {
  .u-section-4 .u-image-1,
  .u-section-4 .u-image-2,
  .u-section-4 .u-image-3,
  .u-section-4 .u-image-4,
  .u-section-4 .u-image-5 {
    min-height: 220px; /* Increase minimum height on mobile */
  }
  
  /* Adjust the hover transform for smaller screens */
  .u-section-4 .u-container-layout:hover .u-group-1,
  .u-section-4 .u-container-layout:hover .u-group-2,
  .u-section-4 .u-container-layout:hover .u-group-3,
  .u-section-4 .u-container-layout:hover .u-group-4,
  .u-section-4 .u-container-layout:hover .u-group-5 {
    transform: translateY(-100px) !important; /* Smaller shift on mobile */
  }
}

/* Ensure the container heights are consistent */
.u-section-4 .u-repeater-1 > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Add clickable styling to vendor containers */
.u-section-4 .u-group-1,
.u-section-4 .u-group-2,
.u-section-4 .u-group-3,
.u-section-4 .u-group-4,
.u-section-4 .u-group-5 {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Underline vendor names to indicate they're clickable */
.u-section-4 .u-text-3,
.u-section-4 .u-text-4,
.u-section-4 .u-text-5,
.u-section-4 .u-text-6,
.u-section-4 .u-text-7 {
  text-decoration: underline;
  color: #478ac9;
}

/* Add hover effect for better UX */
.u-section-4 .u-group-1:hover,
.u-section-4 .u-group-2:hover,
.u-section-4 .u-group-3:hover,
.u-section-4 .u-group-4:hover,
.u-section-4 .u-group-5:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Add a subtle indicator that these are clickable */
.u-section-4 .u-group-1::after,
.u-section-4 .u-group-2::after,
.u-section-4 .u-group-3::after,
.u-section-4 .u-group-4::after,
.u-section-4 .u-group-5::after {
  content: "Click to visit website";
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: #777;
  margin-top: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.u-section-4 .u-group-1:hover::after,
.u-section-4 .u-group-2:hover::after,
.u-section-4 .u-group-3:hover::after,
.u-section-4 .u-group-4:hover::after,
.u-section-4 .u-group-5:hover::after {
  opacity: 1;
}

/* 
 * Services Page Animation Fixes
 * This CSS solves animation issues where elements snap back instead of smoothly transitioning
 */

/* Define keyframes for all animation types */
@keyframes customAnimationIn {
  from {
    opacity: 0;
    transform: translate3d(var(--animation-custom_in-translate_x, 0), 
                          var(--animation-custom_in-translate_y, 0), 0) 
               rotate(var(--animation-custom_in-rotate, 0deg)) 
               scale(var(--animation-custom_in-scale, 0.3));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes flipIn {
  from {
    transform: perspective(400px) rotateX(var(--animation-custom_in-rotate, 90deg)) scale(var(--animation-custom_in-scale, 0.3));
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes counter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply proper animation settings to all animated elements */
[data-animation-name="customAnimationIn"],
[data-animation-name="flipIn"],
[data-animation-name="counter"] {
  animation-fill-mode: forwards !important; /* Critical - keeps final state */
  visibility: visible !important; /* Ensures element remains visible */
  backface-visibility: hidden; /* Prevents flickering in some browsers */
  transform-style: preserve-3d; /* Better 3D animations */
}

/* Fix for specific animation types */
[data-animation-name="customAnimationIn"] {
  animation-name: customAnimationIn;
}

[data-animation-name="flipIn"] {
  animation-name: flipIn;
}

[data-animation-name="counter"] {
  animation-name: counter;
}

/* Fix the animation timing and delay for section elements */
.u-section-1 .u-text-1,
.u-section-3 .u-text-1,
.u-section-3 .u-text-2,
.u-section-3 .u-text-3,
.u-section-4 .u-text-1,
.u-section-4 .u-text-2,
.u-section-4 .u-btn-2 {
  will-change: transform, opacity;
  animation-fill-mode: forwards !important;
}

/* Fix for PDF catalog section */
#flipbook-container,
.canvas-container,
.flipbook-controls {
  visibility: visible !important;
  animation-fill-mode: forwards !important;
}

/* Fix for vendor cards animation */
.u-section-4 .u-image-1,
.u-section-4 .u-image-2,
.u-section-4 .u-image-3,
.u-section-4 .u-image-4,
.u-section-4 .u-image-5 {
  will-change: transform, opacity;
  animation-fill-mode: forwards !important;
  visibility: visible !important;
  transform: translateY(0) !important; /* Ensure start position is correct */
}

/* Fix for vendor card hover interaction */
.u-section-4 .u-group-1,
.u-section-4 .u-group-2,
.u-section-4 .u-group-3,
.u-section-4 .u-group-4,
.u-section-4 .u-group-5 {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  will-change: transform, box-shadow;
}

/* Fix for text animation in groups */
.u-section-4 .u-text-3,
.u-section-4 .u-text-4,
.u-section-4 .u-text-5,
.u-section-4 .u-text-6,
.u-section-4 .u-text-7 {
  transition: transform 0.3s ease !important;
}

/* Ensure vendor cards maintain final state after hover */
.u-section-4 .u-container-layout:hover .u-group-1,
.u-section-4 .u-container-layout:hover .u-group-2,
.u-section-4 .u-container-layout:hover .u-group-3,
.u-section-4 .u-container-layout:hover .u-group-4,
.u-section-4 .u-container-layout:hover .u-group-5 {
  transform: translateY(-50px) !important;
  box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
}

/* Ensure hover effects work consistently */
.u-section-4 .u-container-layout.hover .u-group-1,
.u-section-4 .u-container-layout.hover .u-group-2,
.u-section-4 .u-container-layout.hover .u-group-3,
.u-section-4 .u-container-layout.hover .u-group-4,
.u-section-4 .u-container-layout.hover .u-group-5 {
  transform: translateY(-50px) !important;
  box-shadow: 2px 2px 8px 0px rgba(128,128,128,1) !important;
}

/* Fix for flipbook animations */
.flipbook-container {
  opacity: 1 !important;
  transform: none !important;
}

/* Prevent snapping back to original position */
.u-image[data-animation-name],
.u-text[data-animation-name] {
  animation-fill-mode: forwards !important;
}

/* Fix for mission statement section */
.u-section-3 [data-animation-name] {
  animation-fill-mode: forwards !important;
  will-change: transform, opacity;
}

/* Fix specific to buttons */
.u-btn[data-animation-name] {
  animation-fill-mode: forwards !important;
  will-change: transform, opacity;
}

.vendor-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.vendor-logo-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 250px;
  padding: 10px;
}

.vendor-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* Safari-specific fixes for footer overlapping vendors section */

/* Fix 1: Ensure proper stacking context for Safari */
.u-section-4 {
  position: relative;
  z-index: 1;
  /* Use explicit height instead of min-height for Safari */
  height: auto;
  min-height: 880px;
}

/* Fix 2: Safari-specific height calculation fix */
@supports (-webkit-appearance: none) {
  /* Target Safari specifically */
  .u-section-4 {
    /* Force Safari to calculate height properly */
    height: auto;
    min-height: calc(100vh - 200px); /* Adjust 200px based on your header/footer heights */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .u-section-4 .u-sheet-1 {
    flex: 1 1 auto;
    min-height: 880px;
    height: auto;
  }
  
  /* Ensure vendor grid doesn't overflow */
  .u-section-4 .u-list-1 {
    flex: 0 0 auto;
    margin-bottom: 60px; /* Add bottom margin to prevent footer overlap */
  }
}

/* Fix 3: Alternative approach using transform to create new stacking context */
.u-section-4 {
  transform: translateZ(0); /* Forces hardware acceleration and new stacking context */
  will-change: transform;
}

/* Fix 4: Ensure footer has proper stacking context */
.footer-16371 {
  position: relative;
  z-index: 10;
  transform: translateZ(0);
}

/* Fix 5: Safari mobile specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
  /* Target Safari on iOS */
  .u-section-4 {
    min-height: -webkit-fill-available;
    min-height: stretch;
  }
}

/* Fix 6: Webkit-specific vendor card container adjustments */
@supports (-webkit-backdrop-filter: blur(1px)) {
  /* Safari-specific vendor section fixes */
  .u-section-4 .u-repeater-1 {
    height: auto;
    min-height: 444px;
    margin-bottom: 60px;
  }
  
  /* Prevent vendor cards from bleeding into footer */
  .u-section-4 .u-repeater-1 > div {
    height: auto;
    min-height: 333px;
    max-height: none;
  }
}

/* Fix 7: Force proper document flow for Safari */
body {
  position: relative;
  z-index: 0;
}

/* Ensure main content area has proper height calculation */
main, .u-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Make sure vendors section doesn't shrink inappropriately */
.u-section-4 {
  flex-shrink: 0;
  margin-bottom: 0;
  padding-bottom: 60px; /* Add padding instead of margin for Safari */
}

/* Fix 8: Safari-specific flexbox bug workaround */
@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
  /* Safari only */
  .u-section-4 .u-container-layout-1,
  .u-section-4 .u-container-layout-3,
  .u-section-4 .u-container-layout-5,
  .u-section-4 .u-container-layout-7,
  .u-section-4 .u-container-layout-9 {
    height: auto; /* Override 100% height for Safari */
    min-height: 333px;
  }
  
  /* Fix vendor card heights in Safari */
  .vendor-card {
    height: auto;
    min-height: 300px;
  }
}

/* Fix 9: Prevent footer from floating up in Safari */
.footer-16371 {
  margin-top: auto; /* Push footer to bottom */
  clear: both;
  display: block;
  width: 100%;
}

/* Fix 10: Add clearfix to ensure proper layout flow */
.u-section-4::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive fixes for Safari mobile */
@media (max-width: 767px) {
  @supports (-webkit-appearance: none) {
    .u-section-4 {
      min-height: calc(100vh - 150px);
      padding-bottom: 80px;
    }
  }
}

@media (max-width: 575px) {
  @supports (-webkit-appearance: none) {
    .u-section-4 {
      min-height: calc(100vh - 120px);
      padding-bottom: 100px;
    }
  }
}