.elementor-788 .elementor-element.elementor-element-f452a58{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--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-788 .elementor-element.elementor-element-ab6153e{--display:flex;--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-788 .elementor-element.elementor-element-ab6153e.e-con{--align-self:flex-start;}.elementor-788 .elementor-element.elementor-element-7a43892{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;border-style:none;}.elementor-788 .elementor-element.elementor-element-50da2d8{--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;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:0px;}.elementor-788 .elementor-element.elementor-element-50da2d8::before, .elementor-788 .elementor-element.elementor-element-50da2d8 > .elementor-background-video-container::before, .elementor-788 .elementor-element.elementor-element-50da2d8 > .e-con-inner > .elementor-background-video-container::before, .elementor-788 .elementor-element.elementor-element-50da2d8 > .elementor-background-slideshow::before, .elementor-788 .elementor-element.elementor-element-50da2d8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-788 .elementor-element.elementor-element-50da2d8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-788 .elementor-element.elementor-element-10135a7{border-radius:5px 5px 5px 5px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-788 .elementor-element.elementor-element-ab6153e{--content-width:100%;}.elementor-788 .elementor-element.elementor-element-50da2d8{--width:40%;}}@media(max-width:1024px){.elementor-788 .elementor-element.elementor-element-50da2d8{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-788 .elementor-element.elementor-element-50da2d8{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-788 .elementor-element.elementor-element-10135a7.elementor-element{--align-self:center;}}/* Start custom CSS for container, class: .elementor-element-f452a58 */.material-viewer {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.viewer-image img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  transition: opacity 0.3s ease;
}

.material-panel {
  max-width: 320px;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.material-item {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.material-item:hover {
  transform: scale(1.05);
}

.material-item.active {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px #000000;
}/* End custom CSS */