.elementor-4037 .elementor-element.elementor-element-674d682{--display:grid;--min-height:0vh;--e-con-grid-template-columns:repeat(6, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:column;--overflow:hidden;border-style:none;--border-style:none;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4037 .elementor-element.elementor-element-674d682:not(.elementor-motion-effects-element-type-background), .elementor-4037 .elementor-element.elementor-element-674d682 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#343434;}.elementor-4037 .elementor-element.elementor-element-674d682:hover{border-style:none;}.elementor-4037 .elementor-element.elementor-element-674d682, .elementor-4037 .elementor-element.elementor-element-674d682::before{--border-transition:0.3s;}.elementor-4037 .elementor-element.elementor-element-a8323fd{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4037 .elementor-element.elementor-element-93574f1{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4037 .elementor-element.elementor-element-d0e7452{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4037 .elementor-element.elementor-element-831e0c6{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;border-style:none;}.elementor-4037 .elementor-element.elementor-element-831e0c6:hover{border-style:none;}.elementor-4037 .elementor-element.elementor-element-81fc710{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-4037 .elementor-element.elementor-element-6169694{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-4037 .elementor-element.elementor-element-674d682{--grid-auto-flow:row;}}@media(min-width:768px){.elementor-4037 .elementor-element.elementor-element-674d682{--width:100%;}}@media(max-width:767px){.elementor-4037 .elementor-element.elementor-element-674d682{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-674d682 */.menu-box {
  font-family: 'Raleway', sans-serif;
  position: relative;
  overflow: hidden;
  height: 180px;
  cursor: pointer;
  color: #000;
  will-change: transform;
  transform: translateZ(0);
}

.menu-box .overlay {
  position: absolute;
  top: 6%;
  left: 6%;
  right: 6%;
  bottom: 6%;
  background: #515151;
  opacity: 0.3;
  z-index: 1;
}

.menu-box:hover .overlay {
  opacity: 0.1;
}

.menu-box .content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.menu-box .title {
  white-space: nowrap;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 1;
  transition: top 0.9s ease, transform 0.9s ease, letter-spacing 0.6s ease, opacity 0.6s ease;
}

.menu-box:hover .title {
  top: 10px;
  transform: translate(-50%, 0);
  opacity: 1;
}

.menu-box .title a {
  text-decoration: none;   
  color: inherit;          
  font-size: inherit;      
  font-weight: inherit;    
  letter-spacing: inherit; 
}

.menu-box .title a:hover {
  color: #7999BE;
}

.menu-box .description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: calc(100% - 32px);
  text-align: center;
  line-height: 1.4;
  opacity: 0;
}

.menu-box:hover .description {
  opacity: 1;
  transform: translate(-50%, -35%);
  transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}

.menu-box::before,
.menu-box::after {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  left: 50%;
  transform-origin: center;
  transform: scaleY(0.6);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
  transition: transform 1.3s ease, left 1.3s ease, opacity 1.3s ease;
}

.menu-box:hover::before {
  opacity: 1;
  left: 6%;
  transform: scaleY(1);
}

.menu-box:hover::after {
  opacity: 1;
  left: 94%;
  transform: scaleY(1);
}

@media (hover: none) {
  .menu-box .title,
  .menu-box .description,
  .menu-box::before,
  .menu-box::after {
    opacity: 1;
    transform: none;
    left: unset;
  }

  .menu-box .title {
    top: 10px;
    transform: translate(-50%, 0);
    letter-spacing: 3px;
  }

  .menu-box .description {
    transform: translate(-50%, -35%);
  }

  .menu-box::before {
    left: 6%;
  }

  .menu-box::after {
    left: 94%;
  }
}/* End custom CSS */