.elementor-1982 .elementor-element.elementor-element-76d0063{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-1982 .elementor-element.elementor-element-76d0063:not(.elementor-motion-effects-element-type-background), .elementor-1982 .elementor-element.elementor-element-76d0063 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://webcoprodutor.com/wp-content/uploads/2025/11/Frame-2147227473.svg");background-size:120px auto;}.elementor-1982 .elementor-element.elementor-element-f20d717{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:8px 8px;--row-gap:8px;--column-gap:8px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-1982 .elementor-element.elementor-element-e0e065a{width:var( --container-widget-width, 149px );max-width:149px;--container-widget-width:149px;--container-widget-flex-grow:0;}.elementor-1982 .elementor-element.elementor-element-e0e065a img{width:100%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1982 .elementor-element.elementor-element-bcab519 .elementor-heading-title{font-family:"Helvetica Now Display", Sans-serif;font-size:45px;font-weight:600;color:#FFFFFF;}.elementor-1982 .elementor-element.elementor-element-c0876b7{width:100%;max-width:100%;}@media(min-width:768px){.elementor-1982 .elementor-element.elementor-element-76d0063{--content-width:762px;}}/* Start custom CSS for html, class: .elementor-element-c0876b7 */.converter-wrapper {
  max-width: 1100px;
  border-radius: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.converter-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}

.converter-grid textarea {
  width: 100%;
  min-height: 180px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 16px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.converter-grid textarea::placeholder {
  color: #8a8a8a;
}

.converter-grid textarea:focus {
  outline: none;
  border-color: #9BF97A;
  box-shadow: 0 0 0 1px rgba(79, 140, 255, 0.5);
}

#to-base64 {
  height: 48px;
  padding: 0 20px;
  background:linear-gradient(64deg, #DFFF35 16.47%, #9BF97A 37.31%, #58F5A0 58.84%, #49FFE8 83.53%);
  color: #000;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#to-base64:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(88, 245, 160, 0.4);
}
.btn-copy {
  margin-top: 20px;
  width: 100%;
  background: #1f1f1f;
  color: #ffffff;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-copy:hover {
  background: #2a2a2a;
}
.btn-copy,
.btn-copy:focus,
.btn-copy:active {
  background: #1f1f1f;
}

.btn-copy:hover {
  background: #2a2a2a;
}

.icon-copy {
  width: 18px;
  height: 18px;
}

/* Mobile */
@media (max-width: 768px) {
  .converter-grid {
    grid-template-columns: 1fr;
  }

  #to-base64 {
    width: 100%;
    justify-self: stretch;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Helvetica Now Display';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('http://webcoprodutor.com/wp-content/uploads/2025/10/HelveticaNowDisplay-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'Helvetica Now Display';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('http://webcoprodutor.com/wp-content/uploads/2025/10/HelveticaNowDisplay-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */