.elementor-621 .elementor-element.elementor-element-d8a1070{--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;--margin-top:-95px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:120px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-621 .elementor-element.elementor-element-d8a1070:not(.elementor-motion-effects-element-type-background), .elementor-621 .elementor-element.elementor-element-d8a1070 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://viralconvert.com/wp-content/uploads/2025/02/Namnlos-design-10-4.png");}.elementor-621 .elementor-element.elementor-element-339fce1{--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;}.elementor-621 .elementor-element.elementor-element-e997bec{--display:flex;--border-radius:12px 12px 12px 12px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-621 .elementor-element.elementor-element-e997bec:not(.elementor-motion-effects-element-type-background), .elementor-621 .elementor-element.elementor-element-e997bec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#092E63;}.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-621 .elementor-element.elementor-element-e711978{width:100%;max-width:100%;text-align:center;}.elementor-621 .elementor-element.elementor-element-e711978 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:40px;font-weight:500;text-transform:uppercase;line-height:53px;color:#FFFFFF;}.elementor-621 .elementor-element.elementor-element-020cbc5{--display:flex;--border-radius:12px 12px 12px 12px;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;}.elementor-621 .elementor-element.elementor-element-020cbc5:not(.elementor-motion-effects-element-type-background), .elementor-621 .elementor-element.elementor-element-020cbc5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#092E63;}.elementor-621 .elementor-element.elementor-element-a09a828{width:100%;max-width:100%;text-align:center;}.elementor-621 .elementor-element.elementor-element-a09a828 .elementor-heading-title{font-family:"Archivo", Sans-serif;font-size:40px;font-weight:500;text-transform:uppercase;line-height:53px;color:#FFFFFF;}@media(max-width:767px){.elementor-621 .elementor-element.elementor-element-e997bec{--padding-top:5px;--padding-bottom:5px;--padding-left:5px;--padding-right:5px;}.elementor-621 .elementor-element.elementor-element-e711978{width:100%;max-width:100%;text-align:center;}.elementor-621 .elementor-element.elementor-element-020cbc5{--padding-top:5px;--padding-bottom:5px;--padding-left:5px;--padding-right:5px;}.elementor-621 .elementor-element.elementor-element-a09a828{width:100%;max-width:100%;text-align:center;}}/* Start custom CSS for container, class: .elementor-element-339fce1 */.left, .right {
  flex: 1;
  min-width: 280px;
}

 label {
  display: block;
  margin: 20px 0 5px;
  font-weight: bold;
  color:#fff;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #334155;
  border-radius: 5px;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: #104C9C;
  border-radius: 50%;
  border: 2px solid #1E293B;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

input[type=range]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: linear-gradient(to right, #22c55e, #06b6d4);
  border-radius: 50%;
  border: 2px solid #1E293B;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
}

input[type=range]::-moz-range-track {
  height: 8px;
  background: #334155;
  border-radius: 5px;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 12px;
  color: #9ca3af;
}
.fr-1{
    color: #60A5FA;
    font-weight: bold;
}
.fr-2{
    color:#A775DF;
    font-weight: bold;
}
.fr-3{
    color:#9ADA35;
    font-weight: bold;
}
.fr-4{
    color:#F38D3C;
    font-weight: bold;
}


.right {
  flex: 1;
  min-width: 280px;
}

.card {
  background: #1F2C47; /* Adjusted to match ref */
  padding: 15px;
  border-radius: 8px;
  margin: 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
  font-family: sans-serif;
}

.card.red { 
  background: #2B243F; 
  color: #fff; 
  border: 1px solid #fca5a520;
}
.card.green { 
  background: #20313A; 
  color: #fff; 
  border: 1px solid #86efac20;
}
.card.blue { 
  background: #1E2F46; 
  color: #fff; 
  border: 1px solid #5490DD20;
}

.icon {
  font-size: 20px;
  font-weight: bold;
}

.icon.blue { 
  color: #5490DD; 
  background: #263F6B;
  padding: 2px 12px;
  border-radius: 6px;
}
.icon.blue1 { 
  color: #fff; 
  background: linear-gradient(to right, #22c55e, #06b6d4);
  padding: 2px 12px;
  border-radius: 6px;
}
.icon.red { 
  color: #fca5a5; 
  background: #562E44;
  padding: 2px 12px;
  border-radius: 6px;
}
.icon.green { 
  color: #86efac;
  background: #365538;
  padding: 2px 12px;
  border-radius: 6px;
}

/* New styles for the value spans */
.value.blue { color: #5490DD; }
.value.red { color: #fca5a5; }
.value.green { color: #86efac; }
.value.blue1 { color: #93c5fd; } /* Matching the blue gradient text color */

/* Ensure proper spacing and alignment */
.card b {
  margin-right: 10px;
}

.button {
  background: #fff;
  color: #121C3B;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.note {
  text-align: center;
  font-size: 12px;
  color: #9ca3af;
  margin-top: 10px;
}/* End custom CSS */