.elementor-831 .elementor-element.elementor-element-dfbfee1{--display:flex;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.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-831 .elementor-element.elementor-element-852bde5.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-831 .elementor-element.elementor-element-852bde5{text-align:center;}.elementor-831 .elementor-element.elementor-element-852bde5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:42px;font-weight:700;color:#202122;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-831 .elementor-element.elementor-element-b9f90f9.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-831 .elementor-element.elementor-element-b9f90f9{text-align:center;font-family:"Roboto", Sans-serif;font-size:20px;font-weight:400;}.elementor-831 .elementor-element.elementor-element-ae21c63{--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-831 .elementor-element.elementor-element-6418575 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-831 .elementor-element.elementor-element-6418575.xpro-widget-bg-overlay:before{transition:background 0.3s;}.elementor-831 .elementor-element.elementor-element-c567174{--display:flex;}.elementor-831 .elementor-element.elementor-element-ee22019{--spacer-size:158px;}.elementor-831 .elementor-element.elementor-element-ee22019.xpro-widget-bg-overlay:before{transition:background 0.3s;}body.elementor-page-831:not(.elementor-motion-effects-element-type-background), body.elementor-page-831 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F7FA;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-831 .elementor-element.elementor-element-ae21c63{--content-width:73%;}}@media(max-width:767px){.elementor-831 .elementor-element.elementor-element-852bde5 .elementor-heading-title{font-size:36px;}.elementor-831 .elementor-element.elementor-element-b9f90f9 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-831 .elementor-element.elementor-element-b9f90f9{font-size:18px;}.elementor-831 .elementor-element.elementor-element-6418575 > .elementor-widget-container{padding:10px 10px 10px 10px;}}/* Start custom CSS for html, class: .elementor-element-6418575 *//* --- Base Styles & Variables --- */
.elementor-831 .elementor-element.elementor-element-6418575 { /* Apply variables and base styles to the widget container */
  --brand-light: #f5f7fa;
  --brand-blue: #4a90e2;
  --brand-blue-dark: #3a7bc8;
  --text-primary: #333;
  --text-secondary: #555;
  --border-color: #d0d9e3;
  --background-color: #ffffff;
  --shadow-color: rgba(74, 144, 226, 0.15);
  --success-color: #2ecc71;
  --error-color: #e74c3c;
  --transition-speed: 0.3s;
  --border-radius: 8px;

  /* Container Styles */
  font-family: 'Poppins', sans-serif;
  background-color: var(--background-color);
  padding: 2rem 2.5rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px var(--shadow-color);
  width: 100%;
  margin: 2rem auto;
  overflow: hidden;
  transition: all var(--transition-speed) ease-in-out;
  color: var(--text-primary);
}

/* Apply Poppins & box-sizing globally within the widget */
.elementor-831 .elementor-element.elementor-element-6418575 * {
  box-sizing: border-box;
}

/* --- Header --- */
.elementor-831 .elementor-element.elementor-element-6418575 .uc-header {
  text-align: center;
  margin-bottom: 2rem;
}

.elementor-831 .elementor-element.elementor-element-6418575 .uc-header h2 {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
  opacity: 0;
  animation: fadeInDown 0.6s ease-out forwards;
}

.elementor-831 .elementor-element.elementor-element-6418575 .uc-header .highlight {
  color: var(--brand-blue);
  font-weight: 700;
}

/* --- Category Selector --- */
.elementor-831 .elementor-element.elementor-element-6418575 .uc-category-.elementor-831 .elementor-element.elementor-element-6418575 {
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeInUp 0.6s 0.2s ease-out forwards;
}

.elementor-831 .elementor-element.elementor-element-6418575 .uc-category-.elementor-831 .elementor-element.elementor-element-6418575 label,
.elementor-831 .elementor-element.elementor-element-6418575 .uc-input-group label,
.elementor-831 .elementor-element.elementor-element-6418575 .uc-output-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 1.3rem;
  margin-top: 1.3rem;
}

/* --- Select Element Styling (Shared) --- */
.elementor-831 .elementor-element.elementor-element-6418575 #uc-category,
.elementor-831 .elementor-element.elementor-element-6418575 #uc-from-unit,
.elementor-831 .elementor-element.elementor-element-6418575 #uc-to-unit {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--background-color);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%234a90e2' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1em;
  width: 100%;
  padding: 0.8rem 2.5rem 0.8rem 1rem;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.elementor-831 .elementor-element.elementor-element-6418575 #uc-category:focus,
.elementor-831 .elementor-element.elementor-element-6418575 #uc-from-unit:focus,
.elementor-831 .elementor-element.elementor-element-6418575 #uc-to-unit:focus,
.elementor-831 .elementor-element.elementor-element-6418575 #uc-input-value:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* --- Conversion Row Layout --- */
.elementor-831 .elementor-element.elementor-element-6418575 .uc-conversion-row {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeInUp 0.6s 0.4s ease-out forwards;
}

.elementor-831 .elementor-element.elementor-element-6418575 .uc-input-group,
.elementor-831 .elementor-element.elementor-element-6418575 .uc-output-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* --- Input & Output Specifics --- */
.elementor-831 .elementor-element.elementor-element-6418575 #uc-input-value {
  appearance: textfield;
  -moz-appearance: textfield;
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
/* Hide spinners in WebKit browsers */
.elementor-831 .elementor-element.elementor-element-6418575 #uc-input-value::-webkit-outer-spin-button,
.elementor-831 .elementor-element.elementor-element-6418575 #uc-input-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.elementor-831 .elementor-element.elementor-element-6418575 .uc-output-display {
  background-color: var(--brand-light);
  padding: 0.8rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand-blue);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  min-height: calc(1.6rem + 2 * 0.8rem + 2px); /* Match input height */
  display: flex;
  align-items: center;
  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
  word-break: break-all;
}

/* --- Swap Button --- */
.elementor-831 .elementor-element.elementor-element-6418575 .uc-swap-button-container {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-bottom: calc(0.8rem + 1px); /* Align button */
}

.elementor-831 .elementor-element.elementor-element-6418575 .uc-swap-button {
  background-color: var(--brand-blue);
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  transform-origin: center center;
}

.elementor-831 .elementor-element.elementor-element-6418575 .uc-swap-button:hover {
  background-color: var(--brand-blue-dark);
  transform: scale(1.1) rotate(10deg);
  box-shadow: 0 4px 10px var(--shadow-color);
}

.elementor-831 .elementor-element.elementor-element-6418575 .uc-swap-button:active {
  background-color: var(--brand-blue-dark);
  transform: scale(0.95) rotate(180deg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* --- Footer --- */
.elementor-831 .elementor-element.elementor-element-6418575 .uc-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #aaa;
  opacity: 0;
  animation: fadeInUp 0.6s 0.6s ease-out forwards;
}

/* --- Animations (Global, no .elementor-831 .elementor-element.elementor-element-6418575 needed) --- */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* --- Responsive Design --- */
@media (max-width: 650px) {
  .elementor-831 .elementor-element.elementor-element-6418575 { /* Target the main container */
    padding: 1.5rem;
  }

  .elementor-831 .elementor-element.elementor-element-6418575 .uc-header h2 {
    font-size: 1.8rem;
  }

  .elementor-831 .elementor-element.elementor-element-6418575 .uc-conversion-row {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .elementor-831 .elementor-element.elementor-element-6418575 .uc-swap-button-container {
    order: 1;
    margin: 0.5rem auto;
    padding-bottom: 0;
  }
  .elementor-831 .elementor-element.elementor-element-6418575 .uc-swap-button {
     transform: rotate(90deg);
  }
   .elementor-831 .elementor-element.elementor-element-6418575 .uc-swap-button:hover {
     transform: scale(1.1) rotate(100deg);
   }
  .elementor-831 .elementor-element.elementor-element-6418575 .uc-swap-button:active {
     transform: scale(0.95) rotate(270deg);
  }

  .elementor-831 .elementor-element.elementor-element-6418575 .uc-input-group {
    order: 0;
  }

  .elementor-831 .elementor-element.elementor-element-6418575 .uc-output-group {
    order: 2;
  }

   .elementor-831 .elementor-element.elementor-element-6418575 #uc-category,
   .elementor-831 .elementor-element.elementor-element-6418575 #uc-from-unit,
   .elementor-831 .elementor-element.elementor-element-6418575 #uc-to-unit {
      padding: 0.7rem 2.2rem 0.7rem 0.8rem;
   }
   .elementor-831 .elementor-element.elementor-element-6418575 #uc-input-value,
   .elementor-831 .elementor-element.elementor-element-6418575 .uc-output-display {
      padding: 0.7rem 0.8rem;
      min-height: calc(1.4rem + 2 * 0.7rem + 2px);
   }
}

@media (max-width: 400px) {
   .elementor-831 .elementor-element.elementor-element-6418575 { /* Target the main container */
    padding: 1rem;
   }
   .elementor-831 .elementor-element.elementor-element-6418575 .uc-header h2 {
     font-size: 1.6rem;
   }
}/* End custom CSS */