.elementor-1210 .elementor-element.elementor-element-466bf5c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1210 .elementor-element.elementor-element-6b68ff3 .offcanvas-sidebar{background-image:url("https://crockoffshore.it/wp-content/uploads/2025/10/sidebar_bg.webp");}.elementor-1210 .elementor-element.elementor-element-6b68ff3 .sidebar-logo a img{width:230px;}@media(min-width:768px){.elementor-1210 .elementor-element.elementor-element-466bf5c{--width:100%;}}/* Start custom CSS for xb_header_1, class: .elementor-element-6b68ff3 */.crock500-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
  overflow: visible;
  isolation: isolate;
  --boat-left: 24.8%;
  --boat-top: 46.8%;
  --boat-width: 53.7%;
}

.crock500-logo img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.crock500-base {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.crock500-boat {
  position: absolute;
  left: var(--boat-left);
  top: var(--boat-top);
  width: var(--boat-width);
  z-index: 3;
  transform-origin: 50% 70%;
  animation: crock500-offshore-jump 2.15s cubic-bezier(.48,.05,.27,.99) infinite;
  will-change: transform;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(7, 28, 68, 0.16));
  background: transparent !important;
}

.crock500-logo.large {
  width: min(100%, 920px);
}

.crock500-logo.header {
  width: 164px;
  max-width: 164px;
  --boat-left: 24.5%;
  --boat-top: 46.7%;
  --boat-width: 53.4%;
}

@keyframes crock500-offshore-jump {
  0% {
    transform: translate3d(0px, 0px, 0) rotate(-1.2deg) scale(1);
  }
  12% {
    transform: translate3d(8px, -3px, 0) rotate(0.3deg) scale(1.005);
  }
  22% {
    transform: translate3d(16px, -10px, 0) rotate(3.2deg) scale(1.012);
  }
  32% {
    transform: translate3d(22px, -17px, 0) rotate(5.5deg) scale(1.02);
  }
  43% {
    transform: translate3d(28px, -6px, 0) rotate(1.8deg) scale(1.008);
  }
  54% {
    transform: translate3d(16px, 1px, 0) rotate(-2.6deg) scale(.995);
  }
  66% {
    transform: translate3d(7px, -4px, 0) rotate(-4.2deg) scale(1.003);
  }
  77% {
    transform: translate3d(2px, -11px, 0) rotate(.6deg) scale(1.013);
  }
  88% {
    transform: translate3d(-1px, -5px, 0) rotate(2.4deg) scale(1.006);
  }
  100% {
    transform: translate3d(0px, 0px, 0) rotate(-1.2deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crock500-logo .crock500-boat {
    animation: none !important;
  }
}

<div class="crock500-logo header" aria-label="Logo CROCK500 Offshore animato header">
  <img class="crock500-base" src="https://crockoffshore.it/wp-content/uploads/2026/04/logo_header_164x52.png" alt="CROCK500 Offshore">
  <img class="crock500-boat" src="https://crockoffshore.it/wp-content/uploads/2026/04/boat_clean_final.png" alt="" aria-hidden="true">
</div>/* End custom CSS */