/*
Theme Name:   Hello Elementor Child
Description:  A child theme from Hello Elementor
Author:       Informatiza
Author URL:   https://informatizaweb.com.br
Template:     hello-elementor
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor
*/

/*
Theme Name:   Hello Elementor Child
Description:  A child theme from Hello Elementor
Author:       Informatiza
Author URL:   https://informatizaweb.com.br
Template:     hello-elementor
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor
*/

/*
Theme Name:   Hello Elementor Child
Description:  A child theme from Hello Elementor
Author:       Informatiza
Author URL:   https://informatizaweb.com.br
Template:     hello-elementor
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor
*/

@font-face {
  font-family: 'LTWave';
  src: url('https://piggia.informatizaweb.com/wp-content/uploads/2025/10/LTWave-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

.main {
  background-color: #152655;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'LTWave', sans-serif;
}

.roi-calculator-container {
  background-color: white;
  border-radius: 10px;
  width: 100%;
  padding: 50px;
  display: flex;
  justify-content: space-around;
}
.form-container {
  display: flex;
  width: 40%;
  flex-direction: column;
  padding: 20px;
}

.title {
	font-size: 28px;
	color: #152655;
}

.field-container {
	margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 20px;
  margin-top: 10px;
  color: #152655;
}

.input {
  margin-top: 5px;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #15265552;
  color: #152655;
}

.input:focus {
  outline: none;
}

#calculate-button {
  padding: 12px;
  width: 200px;
  border-radius: 10px;
  border: none;
  background-color: #152655;
  color: white;
  margin-top: 20px;
  cursor: pointer;
  font-weight: 600;
}

#calculate-button:hover {
  background-color: #25418d;
}

.info-container {
  display: flex;
  width: 40%;
  flex-direction: column;
  padding: 20px;
  gap: 0px;
}

.number-circle {
  width: 30px;
  height: 30px;
  padding: 24px;
  background-color: #152655;
  border-radius: 50%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.number {
  color: white;
  font-size: 26px;
	margin: 0px;
}

.number-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px.alphabetic
}

#message {
  margin-top: 20px;
  font-size: 20px;
}

.info {
  margin-top: 10px;
  font-size: 20px;
  color: #152655b4;
}

.success {
  color: green !important;
}

.error {
  color: red !important;
}

@media only screen and (max-width: 600px) {
  .roi-calculator-container{
    flex-direction: column;
	}
  .form-container {
    width: 100%;
	padding: 10px;
	}
  .info-container {
    width: 100%;
	padding: 10px;
	}
	.roi-calculator-container{
    padding: 30px 10px 30px 10px;		
	}	
}