/* Global Styles */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: Montserrat;
  font-weight: 400;
  background: linear-gradient(90deg, #2d2e2f 27.48%, #484a4c 100%);
}

/* Scrollbar Styles */
::-webkit-scrollbar {
  width: 12px;
  height: 25px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(90deg, #2d2e2f 17.48%, #484a4c 100%);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00e8aa 0%, #00c7d2 55.94%);
  border: 3px solid linear-gradient(90deg, #00e8aa 0%, #00c7d2 55.94%);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #008fa3;
}

/* Header Styles */
header {
  background: linear-gradient(90deg, #2d2e2f 27.48%, #484a4c 100%);
  padding: 0px 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;
}

section {
  scroll-margin-top: 90px;
}

#wallet-analysis {
  scroll-margin-top: 7.2rem;
}

#graph-percent-section {
  scroll-margin-top: 12rem;
}

/* Container Styles */
.container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

/* Logo Styling */
.logo img {
  max-width: 150px;
  height: 120px;
}

/* Navigation Styles */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 30px;
  position: relative;
}

.nav-item {
  position: relative;
  padding-bottom: 5px;
}

.nav-item a {
  text-decoration: none;
  color: #fff;
  padding: 10px 0;
  display: block;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 30px;
  height: 2px;
  background: linear-gradient(90deg, #00e8aa 0%, #00c7d2 55.94%);
  border-radius: 2px;
  transform: translateY(50px);
  width: 100%;
}

/* Actions (icons and button) styling */
.actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Language Dropdown Styles */
.language {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.language-selector {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.language-selector svg {
  width: 40px;
  height: auto;
  margin-right: 5px;
}

.language-selector .dropdown-arrow {
  margin-left: 5px;
  font-size: 12px;
}

.language:hover .dropdown-menu {
  display: block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: linear-gradient(180deg, #303133 0%, #47484a 100%);
  border: 1px solid #00c7d2;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 120px;
  z-index: 1000;
}

.dropdown-menu a {
  display: flex;
  align-items: center;
  padding: 10px;
  color: white;
  text-decoration: none;
  font-size: 14px;
}

.dropdown-menu a svg {
  width: 20px;
  height: auto;
  margin-right: 5px;
}

.dropdown-menu a:hover {
  background-color: #00c7d2;
  border-radius: 5px;
}

/* Search and Login Button Styles */
.search,
.login {
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  color: white;
}

button.login {
  background: linear-gradient(90deg, #00c7d2 -7.87%, #02797f 115.99%);
  color: white;
  padding: 8px 30px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Hamburger Menu Styles */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
  transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Login Popup Styles */
.open-popup-button {
  background-color: #005358;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  z-index: 1;
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Background overlay */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 1000;
}

.popup h2 {
  margin-top: 0;
}
.popup-connect-container {
  background-color: red;
}
.popup-content {
  background: linear-gradient(180deg, #303133 0%, #47484a 100%);
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px; /* Width of the popup */
  max-height: 75vh; /* Limit max height */
  overflow-y: auto; /* Scroll if content exceeds height */
  text-align: center;
  position: absolute;
  overflow: hidden;
}
.popup-content .button-group {
  display: flex;
  justify-content: left;
  margin: 20px 0;
}
.popup-content .input-login:focus {
  border: 2px solid red;
}
.input-groups {
  position: relative;
  margin-bottom: 15px;
  border-radius: 8px;
}
.input-groups input {
  padding: 10px;
  width: 95%;
  border: none;
  border-radius: 5px;
  background: #005358;
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
}

.input-groups input:focus {
  border: 2px solid #00c7d2;
}
.popup-content .button-group button {
  padding: 10px 20px;
  border: none;
  background-color: #00c7d2;
  border-radius: 3px;
  color: white;
  gap: 30px;
}
.popup-content .button-group .energy-btn-2 {
  margin-left: 20px;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 2rem;
  cursor: pointer;
  font-weight: bold;
}

.popup-content h2 {
  margin-bottom: 20px;
}

/* Input Group Styles */
.input-group {
  position: relative;
  margin-bottom: 15px;
  border-radius: 8px;
}

.input-section .yearly-div input {
  color: white;
}

.input-group input {
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: #005358;
  color: white;
  width: 300px;
}

.input-group input:focus {
  border: 2px solid #00c7d2;
}

.input-group .icon {
  position: relative;
  top: 4px;
  font-size: 18px;
  color: #aaa;
}

#rent-button-container button {
  padding: 5px;
  color: white;
  border-radius: 3px;
  background-color: #00c7d2;
  border: none;
  font-size: 1rem;
  font-weight: 600;
}
/* Checkbox Group Styles */
.checkbox-group {
  text-align: left;
  margin-bottom: 15px;
}

.forgot-password {
  display: block;
  text-align: center;
  margin-bottom: 15px;
  font-size: 0.9rem;
  color: #2dffcc;
  text-decoration: none;
}

/* Buttons in Popup */
.login-button {
  width: 70%;
  background: linear-gradient(90.31deg, #00c7d2 -7.91%, #02797f 115.9%);
  color: white;
  border: none;
  padding: 20px 10px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px;
  justify-content: center;
}

.close-button {
  width: 70%;
  background: transparent;
  color: white;
  border: 3px solid rgba(2, 121, 127, 0.5);
  padding: 20px 10px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px;
}

.popup-content p {
  margin-top: 15px;
  font-size: 0.9rem;
}

.popup-content a {
  color: #005358;
  text-decoration: none;
}

.popup-content a:hover {
  text-decoration: underline;
}

/* Hero Section Styling */
/* Start Hero Section */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
}

.hero {
  height: 85vh;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: white;
  position: relative;
  margin-top: 80px;
}

.hero-content {
  max-width: 800px;
  padding-bottom: 4rem;
}

.hero h1 {
  font-size: 2.3rem;
  font-weight: boldest;
  margin: 0;
}

.hero h1 .highlight {
  color: #00e8aa;
}

.hero p {
  font-size: 1.2rem;
  margin: 20px 0;
}

.hero h2 {
  font-size: 1.5rem;
  margin: 20px 0;
}

.btn-watch-now {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(45, 255, 204, 0.5) 0%, #00c7d2 100%);
  color: white;
  text-decoration: none;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 600;
  transition: background-color 0.3s ease;

  padding: 1.3rem;
  backdrop-filter: blur(10px);
}

.btn-contact-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  z-index: 1;
}

.btn-contact-us a {
  background: linear-gradient(90deg, #00e8aa 0%, #02797f 100%);
  border-radius: 100px;
  transition: background-color 0.3s ease;
  padding: 2rem 2.5rem;
  z-index: 9999;
  border: none;
}

.btn-contact-us a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: white;
}

.btn-watch-now:hover {
  background-color: #00c7d2;
}
/* End Hero Section */

/* Modal Section */
/* Start Modal Section */
.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  padding-top: 60px;
}

.modal-content {
  background-color: #303133;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  z-index: 1001;
  position: relative;
}

.close-video-button {
  color: white;
  float: right;
  font-size: 48px;
  font-weight: bold;
}

.close-video-button:hover,
.close-video-button:focus {
  color: #00c7d2;
  text-decoration: none;
  cursor: pointer;
}

iframe {
  width: 100%;
  height: 315px;
}
/* End Modal Section */

/* Remove Spinner Controls */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Wallet Calculation Section Styling */
/* Start Wallet Calculation Section */
.wallet-calculation {
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding: 20px 0px;
  background: #00656a;
  color: white;
  margin-top: -15vh;
  border-radius: 30px;
}

.wallet-calculation h1 {
  font-size: 1.5rem;
  margin: 0;
}

.gradient-border-mask {
  position: relative;
  padding: 1.3rem;
  backdrop-filter: blur(10px);
}

.wallet-calculation::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  border: 6px solid transparent;
  background: linear-gradient(99.5deg, #008fa3 42.83%, #00e8aa 76.53%)
    border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.gradient-border-wrapper {
  display: inline-block;
  position: relative;
  border-radius: 6px;
  padding: 2px;
  background: linear-gradient(99.5deg, #00e8aa 42.83%, #008fa3 76.53%);
}

#message {
  color: #ff6b6b;
  font-size: 1.2rem;
  text-align: center;
}

.gradient-border-input {
  padding: 15px;
  border-radius: 6px;
  font-size: 1rem;
  background-color: #005358;
  border: none;
  color: white;
  outline: none;
  width: 500px;
}

.btn-check-now {
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(45, 255, 204, 0.5) 0%, #00c7d2 100%);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 16px;
}

.wallet-calculation p {
  font-size: 1.2rem;
  margin: 20px 0 0;
  text-align: center;
}

.btn-check-now {
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  border: 3px solid transparent;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: background-color 0.3s ease;
  background: linear-gradient(90deg, rgba(45, 255, 204, 0.5) 0%, #00c7d2 100%);
  cursor: pointer;
}

.btn-check-now a {
  text-decoration: underline;
}

.btn-check-now::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: linear-gradient(90deg, rgba(45, 255, 204, 0.5) 0%, #00c7d2 100%);
  border-radius: 15px;
  z-index: -1;
  pointer-events: none;
}

#wallet-graph {
  max-height: 50vh;
  width: 100%;
  display: block;
  padding: 0px 40px 20px 40px;
}
/* End Wallet Calculation Section */

/* Graph Section Styling */
/* Start Graph Section */
.graph-section {
  height: auto;
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding: 5px;
  background: #00656a;
  color: white;
  margin-top: 1rem;
  z-index: -1;
  box-sizing: border-box;
  border-radius: 30px;
  backdrop-filter: blur(10px);
}

.graph-section::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  border: 6px solid transparent;
  background: linear-gradient(221.6deg, #00e5ad 23.52%, #008fa3 86.2%)
    border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.graph-container h2 {
  font-size: 1.5rem;
  text-align: center;
}

.graph {
  max-width: 100%;
}

#message {
  padding-top: 10px;
}
/* End Graph Section */
/* Circular Progress Bar Section */
.progress-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-wrapper p {
  font-weight: 600;
  font-size: 12px;
}

.circular-progress {
  margin-left: 20px;
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #005358;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  clip: rect(0px, 60px, 60px, 30px);
}

.fill {
  width: 100%;
  height: 100%;
  background: #00e5ad 50%;
  border-radius: 50%;
  position: absolute;
  clip: rect(0px, 60px, 60px, 30px);
  transform: rotate(0deg);
  transition: transform 1s linear;
  opacity: 0;
}

.mask.full {
  clip: rect(0px, 60px, 60px, 0px);
}

.inside-circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #00656a;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
}

/* Graph and Labels Section */
.graph canvas {
  padding-left: 20px;
}

.labels-cost {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.labels-cost .our-cost {
  display: flex;
  justify-content: center;
  align-items: center;
}

.labels-cost .our-cost p {
  padding-left: 10px;
  font-weight: 600;
  font-size: 12px;
}

.labels-cost .our-cost .circle {
  background-color: #00e8aa;
}

.labels-cost .your-cost .circle {
  background-color: #00c7d2;
}

.labels-cost .circle {
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

.labels-cost span {
  color: #00e5ad;
}

/* Jackpot Animations Section */
.jackpot-animations {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border-radius: 10px;
}

#trx-wrapper-1,
#trx-wrapper-2,
#trx-wrapper-3,
#trx-wrapper-4 {
  padding-right: 45px;
}

.jackpot-animations-1 {
  background-color: rgba(0, 199, 210, 0.5);
}

.jackpot-animations-1 p {
  font-size: 14px;
  font-weight: 600;
}

.jackpot-animations-2 {
  background-color: rgba(0, 232, 170, 0.5);
}

#jackpot-animations-2 {
  margin-left: 8px;
}

.jackpot-animations h3 {
  font-size: 1rem;
}
.jackpot-animations h4 {
  font-size: 14px;
}
.trx-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}

.trx-wrapper p {
  font-size: 1.2rem;
  font-weight: 600;
  padding-left: 6px;
}

#trx-wrapper svg {
  height: 20px;
  width: 20px;
}

.jackpot-animations-2 {
  justify-content: start;
  margin-left: 35px;
}

.jackpot-animation-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 30px;
}

/* Odometer and Cost Prices Section */
.odometer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  background-color: #005358;
  height: 40px;
  width: 200px;
  text-align: center;
  overflow: hidden;
  margin: 5px 0;
  border-radius: 5px;
}

.cost-prices-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
  justify-content: center;
  align-items: center;
  padding: 0 30px;
  gap: 8px;
}

.cost-prices-wrapper .cost-prices-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid #ffffff80;
  background: linear-gradient(278.81deg, #00969e 29.71%, #05b2bc 96.54%);
  gap: 5px;
  border-radius: 15px;
}

.cost-prices-container svg {
  height: 65px;
  width: 65px;
}

.cost-prices-wrapper .jackpot-wrapper {
  width: 300px;
  border: 1px solid cadetblue;
  border-radius: 10px;
  background-color: #007d84;
  height: 50px;
  margin-left: 5px;
}

.jackpot-wrapper-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jackpot-wrapper-title span {
  font-size: 1rem;
  font-weight: bold;
  padding-left: 4px;
}

.cost-prices-wrapper .jackpot-wrapper {
  display: flex;
  flex-direction: column;
  border: 2px solid #ffffff80;
  background: linear-gradient(278.81deg, #00969e 29.71%, #05b2bc 96.54%);
  margin-left: 5px;
  border-radius: 10px;
}

.cost-prices-wrapper .jackpot-wrapper .odometer-container {
  margin-top: 0;
}

.cost-prices-wrapper p {
  font-size: 1.2rem;
  font-weight: 600;
  padding-left: 6px;
}

.cost-prices-wrapper img {
  height: 30px;
  width: 30px;
}

.cost-prices-wrapper svg {
  height: 30px;
  width: 30px;
}

/* Jackpot Wrapper Section */
.jackpot-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
}

.jackpot-inner-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jackpot-animations svg {
  height: 30px;
  width: 30px;
}

.jackpot-animations img {
  height: 30px;
  width: 30px;
}

/* Number and Tron Wallet Section */
.number {
  width: 1ch;
  height: 100%;
  text-align: center;
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: 100px;
}

.digit {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-out;
}

.digit div {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
}

.digit,
.comma {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: bold;
}

.comma {
  font-size: 2rem;
  color: white;
}

.tron-wallet-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  height: 50px;
  width: 180px;
  border: 2px solid #ffffff80;
  background-color: #007d84;
  border-radius: 10px;
}

.tron-wallet-container h5 {
  font-size: 19px;
  padding-left: 4px;
}

#wallet-logo {
  height: 20px;
  width: 20px;
}

/* Our Services Energy Card */
.our-services {
  padding: 20px;
  color: white;
  margin-top: 1rem;
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding: 20px;

  border-radius: 50px;
}
.our-services h1 {
  text-align: center;
}

.our-services-calculators-container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  width: 100%;
  gap: 10px;
  justify-content: space-between; /* Space between cards */
  align-items: stretch;
}

.our-services-calculators-container .calculators-cards {
  flex: 1 1 calc(50% - 10px); /* Two cards per row */
  max-width: calc(50% - 10px);
  background: #00656a;
  color: white;
  padding: 25px;
  box-sizing: border-box;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  display: flex; /* Make the card a flex container */
  flex-direction: column;
  /* Ensure proper layout of content inside the card */
  /* Ensure equal height for both cards */
  /* Prevent flex items from shrinking smaller than their content */

  box-sizing: border-box;
}

.our-services-calculators-container .calculators-cards::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  border: 6px solid transparent;
  background: linear-gradient(221.6deg, #00e5ad 23.52%, #008fa3 86.2%)
    border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.our-services-calculators-container .calculator-content-wrapper ul.custom-list {
  list-style: none; /* Remove default bullets */
  padding-left: 0;
}
.our-services-calculators-container .custom-list span {
  font-weight: bold;
}

.our-services-calculators-container
  .calculator-content-wrapper
  ul.custom-list
  li {
  background: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C13.1819 21 14.3522 20.7672 15.4442 20.3149C16.5361 19.8626 17.5282 19.1997 18.364 18.364C19.1997 17.5282 19.8626 16.5361 20.3149 15.4442C20.7672 14.3522 21 13.1819 21 12C21 10.8181 20.7672 9.64778 20.3149 8.55585C19.8626 7.46392 19.1997 6.47177 18.364 5.63604C17.5282 4.80031 16.5361 4.13738 15.4442 3.68508C14.3522 3.23279 13.1819 3 12 3C9.61305 3 7.32387 3.94821 5.63604 5.63604C3.94821 7.32387 3 9.61305 3 12C3 14.3869 3.94821 16.6761 5.63604 18.364C7.32387 20.0518 9.61305 21 12 21ZM11.768 15.64L16.768 9.64L15.232 8.36L10.932 13.519L8.707 11.293L7.293 12.707L10.293 15.707L11.067 16.481L11.768 15.64Z" fill="%232DFFCC"/></svg>')
    no-repeat;
  padding-left: 30px; /* Adjust padding to make space for the icon */
  margin-bottom: 10px;
}

.calculator-renting-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.calculator-renting-container span {
  font-weight: bold;
}
.energy-input-fields {
  padding: 0;
  height: 50px;
}
.calculator-renting-container .renting-input-fields {
  display: flex;

  align-items: center;
}
.renting-trx-input-field {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #005358;
  font-weight: bold;
  border-radius: 10px;
  padding: 0 10px 0 0;
}
.renting-output-cost-field {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #005358;
  font-weight: bold;
  border-radius: 10px;
  padding: 0 10px 0 0;
}

#solution-cost-input {
  width: 140px;
}

.calculator-renting-container
  .renting-input-fields
  .renting-transactions-field {
  display: flex;
  justify-content: center;
  align-items: center;
}
.renting-transactions-field {
  padding-left: 5px;
}
.calculator-renting-container .energy-input-fields {
  display: flex;
  align-items: center;
}
.calculator-renting-container input {
  padding: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 20px;
  border: none;
  text-align: center;
  margin: 0 5px;
  background: #005358;
  color: white;
  height: 50px;
  width: 160px;
  pointer-events: auto;
  z-index: 1;
  position: relative;

  padding: 10px; /* Padding for inner spacing */
  box-sizing: border-box; /* Ensure borders and padding are included in the height */

  border-radius: 10px;
  transition: border-color 0.3s ease; /* Smooth transition for border change */
  outline: none;
}
input::placeholder {
  font-size: 14px; /* Reduce the font size of the placeholder */
  /* You can also change the placeholder color */
  opacity: 1; /* Ensure opacity is set if needed */
}
.solution-energy-output-field input {
  width: 210px;
}
.renting-transactions-field input {
  width: 100px;
}
.calculator-renting-container input:focus {
  border: 2px solid #00c7d2;
  outline: none;
}
.card-container {
  display: grid;
  grid-template-columns: 1fr; /* Creates two equal-width columns */
  gap: 30px;
}
.energy-card .solution-card-wrapper {
  display: flex;
  flex-direction: row;
}
.energy-card {
  background: linear-gradient(187.54deg, #007d84 5.85%, #00c7d2 180.14%);
  width: 100%; /* Ensures cards take up full width of their grid cell */
  padding: 1.3rem;
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  backdrop-filter: blur(10px);

  /* Ensures padding and border are included in the width and height */
}

.energy-card::before {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  border-radius: 30px;
  border: 6px solid transparent;
  background: linear-gradient(226.5deg, #00e5ad 25.66%, #2bb3c6 89.81%)
    border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.services-card-container {
  display: flex;
}
.services-card-container .advantages-solution {
  margin-right: 15px;
  width: 50%;
}
.energy-card .cards-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.advantages-solution {
  width: 40%;
  display: flex;
  flex-direction: column;
}
.advantages-solution .btn-contact-crypt {
  margin-top: 14rem;
}
.advantages-solution .disadvantages-section h3 {
  font-size: 1.5rem;
}
/* .advantages-solution .disadvantages-section {
} */
.solution-content {
  width: 50%;
}
.card-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-title svg {
  height: 40px;
  width: 40px;
  padding-left: 5px;
}
.energy-card .crypto-title h2 {
  font-size: 1.1rem;
}
.energy-card h2 {
  font-size: 1.5rem;
}

.energy-card .input-section {
  margin-top: 20px;
}
.energy-card .input-section .input-wrapper {
  display: flex;
  font-weight: bold;
  align-items: center;
}

.input-section .input-wrapper input[type="text"] {
  padding: 20px;
}
.transaction-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
  margin-top: 20px;
}

.input-group {
  display: flex;
  justify-content: space-between;
  margin: 15px 0px;

  background-color: #005358;
}

.input-group input[type="text"],
.input-group select {
  padding: 20px;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  outline: none;
}
.input-group input[type="text"] {
  color: white;
  padding: 12px;
}

.input-group select {
  color: white;
  background: #005358;
}
#energySelect {
  color: white;
  background: #005358;
  padding: 8px;
  border-radius: 8px;
}
.transaction-section {
  display: flex;
}
.transaction-section input {
  padding: 20px;
  font-size: 14px;
  border-radius: 8px;
  border: none;
  width: 60px;
  text-align: center;
  margin: 0 5px;
  background: #005358;
  color: white;
}

.quick-select {
  margin-top: 10px;
  display: flex;
}
.resource-section-1 {
  display: flex;
}
.resource-section-1 input {
  padding: 8px;
  font-size: 14px;
  border-radius: 8px;
  border: none;

  text-align: center;
  margin: 0 5px;
  background: #005358;
  color: white;
}

.resource-section {
  margin-top: 10px;
  font-weight: bold;
}
.resource-section input {
  padding: 8px;
  font-size: 1.5rem;
  border-radius: 8px;
  border: none;

  text-align: center;
  margin: 0 5px;
  background: #005358;
  color: white;
}
#aproxTransactions {
  padding: 8px;
}
/* .resource-section span {
  padding-bottom: 20px;
} */
.resource-section {
  display: inline-block;
}
.resource-section input {
  width: 50%;
  margin: 0px;
  padding: 20px;
}
.resource-energy-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #005358;
  border-radius: 8px;
}
.resource-energy-wrapper input {
  border-radius: 8px;
  width: 50%;
}
.resource-energy-wrapper span {
  font-size: 1.3rem;
}
.resource-section .input-resources {
  display: flex;
  justify-content: center;
  align-items: center;
}
#disadvantages-energy-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 10px;
  margin-top: 2rem;
}
#disadvantages-energy-card .disadvantages-section {
  padding: 20px; /* Add some padding for content */
  box-sizing: border-box;
  text-align: left;
  border: 1px solid cadetblue;
  background-color: rgba(0, 232, 170, 0.5);
  border-radius: 30px;
  padding: 25px 15px;

  margin-bottom: 10px;
}
.disadvantages-title {
  display: flex;
  justify-content: left;
  align-items: center;
}
.disadvantages-title h2 {
  padding-left: 20px;
  font-size: 1.2rem;
}

.disadvantages {
  display: flex;
}
.disadvantages .list-style {
  padding-top: 5px;
}
.disadvantages .disadvantage-content {
  padding-left: 5px;
  line-height: 25px;
}

.disadvantages-section h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.disadvantages-section ul {
  list-style: none;
  padding: 0;
}

.disadvantages-section ul li {
  display: flex;
  text-align: justify;
  position: relative;
  line-height: 1rem;
  font-size: 16px;
  margin: 5px 0;
}

.disadvantages-section ul li svg {
  padding-right: 10px;
  height: 50px;
  width: 50px;
}

button:focus,
input:focus {
  outline: none;
  box-shadow: 0 0 10px #00c7d2;
}
/* .input-login {
  background: #292a2e;
  padding-left: 10px;
}
.input-login input {
  background: #292a2e;
} */
/* APi Section CSS */
.api-section {
  text-align: center;
  padding: 20px;
  color: white;
  margin-top: 3rem;
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding: 20px;

  box-sizing: border-box;
  border-radius: 50px;
}

.api-section h1 {
  margin-bottom: 20px;
}

.api-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.api-content span {
  color: #00c7d2;
}

.left-column {
  flex: 1;
  max-width: 50%;
  text-align: left;
}

.left-column h2 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.left-column p {
  margin-bottom: 10px;
}

.left-column ul {
  list-style-type: disc;
  margin-left: 20px;
}
.left-column ul li {
  line-height: 1.5rem;
}

.btn-watch-now {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(90deg, rgba(45, 255, 204, 0.5) 0%, #02797f 100%);

  text-decoration: none;
  border-radius: 50px;
}

.btn-watch-now:hover {
  background-color: #0056b3;
}

.right-column {
  flex: 1;
  max-width: 50%;
  text-align: center;
}

.right-column img {
  max-width: 100%;
  height: auto;
}

/* Pricing Section */
.prices-section {
  text-align: center;
  padding: 20px;
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding: 20px;

  color: white;
  margin-top: 2rem;
  box-sizing: border-box;
  border-radius: 50px;
}

.prices-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.price-card {
  flex: 1;
  width: 200px;
  height: 265px;

  background: linear-gradient(185.06deg, #00c7d2 9.1%, #2e5f63 119.99%);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.price-details h5 {
  font-size: 1.4rem;
}
.divider {
  height: 2px;
  background-color: white;
  opacity: 40%;
  margin-top: 20px;
}

.price-card h2 {
  font-size: 1.2rem;
}

.price-card p {
  margin: 0;
}

/* Chooses us Section */
.choose-us-section {
  text-align: center;
  padding: 20px;
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding: 20px;

  color: white;

  box-sizing: border-box;
  border-radius: 50px;
}

.choose-us-section h1 {
  margin-bottom: 20px;
}

.choose-us-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: wrap;
  gap: 20px;
}

.choose-us-card {
  max-width: 10rem;

  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180.08deg, #00c7d2 -15.72%, #2e5f63 99.93%);

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.card-icon img {
  max-width: 60px;
  height: auto;
  margin-bottom: 10px;
}

.choose-us-card h2 {
  margin: 10px 0;
  font-size: 1.2rem;
}

.choose-us-card p {
  margin: 0;
  font-size: 0.9rem;
}

.appointment-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  position: relative;
  width: 85%;
  margin: 0 auto;
  background: linear-gradient(287.1deg, #02797f 6.18%, #00c7d2 93.04%);
  color: white;
  box-sizing: border-box;
  border-radius: 10px;
  margin-top: 2rem;
}

.appointment-section h1 {
  margin-bottom: 20px;
}

.btn-appointment {
  display: inline-block;
  padding: 10px 80px;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(90deg, rgba(45, 255, 204, 0.5) 0%, #02797f 100%);
  text-decoration: none;
  border-radius: 50px; /* Rounded button */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-appointment:hover {
  background-color: #218838; /* Darker green on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.footer-section {
  background: url("assets/Footer-bg-1.webp") no-repeat center center;
  background-size: cover;
  padding: 10px 20px;

  color: white;

  margin-top: 1rem;
}

.footer-content {
  position: relative;
  width: 85%;
  margin: 0 auto;

  max-width: 1200px;
}
.footer-content .footer-logo {
  text-align: center;
}
.footer-logo img {
  max-width: 150px;
}

.footer-details {
  border-top: 0.5px solid #fff;
  border-bottom: 0.5px solid #fff;
  padding: 5px 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-column {
  flex: 1;
  max-width: 300px;
}

.footer-column h3 {
  margin-bottom: 15px;
  font-size: 1.2rem;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  color: #fff;
  text-decoration: none;
}

.footer-column ul li a:hover {
  text-decoration: underline;
}

.contact-item {
  display: flex;
  align-items: left;
  margin-bottom: 10px;
}

.contact-item a {
  margin-left: 10px;
  color: #fff;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

.contact-icon {
  width: 20px;
  height: 20px;
}
#resources-section {
  display: flex;
}
#resources-energy-wrapper input {
  padding: 20px;
}
.quick-select input {
  padding: 20px;
}

.renting-energy {
  display: flex;
  flex-direction: column;
}

.renting-energy .renting-input-fields {
  display: flex;
}
.renting-energy .renting-input-fields .left-input span {
  font-size: 1.3rem;
}
.renting-energy .left-input {
  display: flex;

  background-color: #005358;
  justify-content: center;
  align-items: center;
  padding-right: 15px;
  font-weight: bold;
  border-radius: 8px;
}
.renting-energy .right-input {
  display: flex;

  font-weight: bold;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}
.renting-energy .left-input input {
  padding: 20px 0px;
  width: 190px;
  font-size: 1.5rem;
  border-radius: 8px;
  border: none;
  text-align: center;
  margin: 0 5px;
  background: #005358;
  color: white;
  font-weight: bold;
}
.renting-energy input {
  font-weight: bold;
}

.renting-energy .right-input input {
  padding: 20px 0;
  width: 120px;
  font-size: 1.5rem;
  border-radius: 8px;
  border: none;
  text-align: center;
  margin: 0 5px;
  background: #005358;
  color: white;
  font-weight: bold;
}
.renting-energy input[type="number"]::placeholder {
  font-size: 1rem;
}
.renting-energy .right-input {
  display: flex;
}

/* Spinner styling */
.spinner {
  border: 4px solid #f3f3f3; /* Light grey */
  border-top: 4px solid rgba(45, 255, 204, 0.5); /* Blue */
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
  margin-left: 10px; /* Space between text and spinner */
}

/* Hidden spinner when not loading */
.hidden {
  display: none;
}

/* Spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 80px;
    right: 20px;
    background-color: #333;
    border-radius: 5px;
    width: 200px;
    padding: 10px;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  nav ul.show {
    display: flex;
  }

  .hamburger {
    display: flex;
  }

  /* .actions {
    display: none;
  } */

  .language-selector {
    padding: 0px;
  }
  .hamburger.open + nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  .hamburger.open + nav ul .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .nav-item.active::after {
    transform: translateY(0);
    bottom: 0;
    width: 100%;
  }
  #disadvantages-energy-card {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  header {
    padding: 0;
  }

  nav ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 80px;
    right: 20px;
    background-color: #333;
    border-radius: 5px;
    width: 200px;
    padding: 10px;
    gap: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  nav ul.show {
    display: flex;
  }

  .hamburger {
    display: flex;
  }

  .actions {
    gap: 10px;
  }

  .hamburger.open + nav ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  .hamburger.open + nav ul .actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .nav-item.active::after {
    transform: translateY(0);
    bottom: 0;
    width: 100%;
  }

  button.login {
    padding: 8px 10px;
  }
  /* hero small devices */
  .hero-content {
    padding-bottom: 6rem;
  }
  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero h2 {
    font-size: 1.2rem;
  }

  .btn-watch-now {
    font-size: 0.9rem;
    padding: 8px 16px;
  }
  iframe {
    width: 100%;
  }
  .modal-content {
    padding: 5px;

    width: 95%;
    top: 15%;
  }
  .close-video-button {
    padding-right: 15px;
  }
  /* wallet for small devices */
  .wallet-calculation {
    width: 95%;
  }
  .wallet-calculation h1 {
    font-size: 1.5rem;
  }

  .wallet-calculation p {
    font-size: 1rem;
  }
  #wallet-graph {
    display: none;
  }
  .graph-section {
    width: 95%;
  }
  .graph canvas {
    height: 180px;
  }
  .graph-section h2 {
    text-align: center;
    padding: 0;
  }
  .input-container {
    flex-wrap: wrap;
  }
  .input-container input {
    font-size: 0.9rem;
    width: 280px;
  }

  .input-container .btn-check-now {
    font-size: 0.9rem;
  }
  .saving-section {
    flex-direction: column;
    align-items: center;
  }
  .cost-prices-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .percent-field {
    width: 80%;
    padding: 10px 10px;
    height: 40px;
  }
  .cost-input p {
    text-align: center;
  }
  .input-field .percent-field {
    width: auto;
  }
  .our-services-calculators-container {
    flex-direction: column-reverse;
  }
  .our-services-calculators-container .calculators-cards {
    max-width: calc(105% - 10px);
  }
  .calculator-renting-container .renting-input-fields {
    flex-direction: column;
  }
  .calculator-renting-container
    .renting-input-fields
    .renting-trx-input-field
    input {
    width: 100%;
  }
  .calculator-renting-container
    .renting-input-fields
    .renting-transactions-field {
    margin-top: 20px;
  }
  .calculator-renting-container .energy-input-fields input {
    width: 150px;
  }
  #solution-cost-input {
    width: 100px;
  }
  .our-services {
    width: 90%;
  }
  .card-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "card2"
      "card1";
  }

  .energy-first-card {
    grid-area: card1;
    padding: 15px;
  }
  .disadvantage-wrapper {
    display: flex;
    flex-direction: column;
  }

  .disadvantages-section {
    margin-bottom: 20px;
  }
  #solution-card {
    height: auto;
  }

  .energy-second.card {
    grid-area: card2;
  }

  .energy-card {
    margin-top: 2rem;
  }
  .transaction-section .btn-transaction {
    padding: 10px 10px;
  }

  .transaction-section input {
    padding: 8px 0px;
    width: 60px;
  }
  .api-section h1 {
    margin-bottom: 8px;
  }
  .api-section {
    margin: 15px auto;
  }
  .api-content {
    flex-direction: column-reverse;
    gap: 0;
  }
  .api-content .left-column,
  .right-column {
    max-width: 100%;
  }
  .left-column ul {
    margin-left: 0;
    margin-bottom: 12px;
  }
  .left-column ul li {
    line-height: 1.5rem;
  }
  .prices-section {
    width: 100%;
  }
  .prices-container {
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .price-card {
    width: auto;
    height: 100%;
  }
  .price-details {
    padding: 10px;
  }
  .choose-us-section {
    width: 100%;
  }
  .choose-us-container {
    grid-template-columns: 1fr 1fr;
    gap: 40px 10px;
  }
  .choose-us-card {
    width: 100%;
    height: 100%;
  }
  .appointment-section {
    flex-direction: column;
    width: 85%;
    padding: 8px;
    margin-top: 4rem;
  }
  .appointment-section h1 {
    font-size: 1.2rem;
  }
  .btn-appointment {
    padding: 10px 20px;
  }
  .footer-section {
    margin-top: 15px;
    padding: 5px 20px;
  }
  .footer-details {
    flex-direction: column;
  }
}
@media (max-width: 430px) {
  .logo img {
    max-width: 120px;
    height: 100px;
  }
  
  .hero {
    height: 80vh;
  }

  .input-wrapper {
    flex-direction: column;
    justify-content: space-around;
  }
  .labels-cost .our-cost p {
    font-size: 11px;
  }
  .inner-input-wrapper {
    width: 100%;
  }
  .jackpot-animation-container {
    grid-template-columns: 1fr;
    padding: 0 10px;
    gap: 2px;
    margin-top: 10px;
  }
  .jackpot-animations-1 {
    margin: 2rem 0;
  }
  .jackpot-animations {
    align-items: unset;
  }
  .jackpot-animations h3 {
    text-align: center;
  }
  .jackpot-wrapper {
    flex-direction: column;
  }
  .jackpot-animations {
    padding: 0;
    margin: 5px 0px;
    margin-left: 0;
  }
  .cost-prices-wrapper {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 1rem 0;
    width: 100%;
    padding: 0px;
    display: grid;
  }
  .cost-prices-wrapper .jackpot-wrapper {
    height: unset;
  }
  .btn-contact-container {
    margin-top: 0;
    padding: -2px;
  }
  .btn-contact-us {
    margin-top: 30px;

    bottom: 10px;
  }
  .graph-container h2 {
    font-size: 1.2rem;
  }
  #jackpot-animations-2 {
    margin-left: 0;
  }
  .jackpot-animations-2 h3 {
    font-size: 1.5rem;
  }
  .odometer-container {
    width: 200px;
  }
  .cost-prices-wrapper .odometer-container {
    width: 200px;
  }
  #our-solution-cost-animation {
    padding-right: 35px;
  }
  #total-last-month-cost {
    padding-right: 35px;
  }
  #trx-wrapper-1 {
    padding-right: 0;
  }
  #trx-wrapper-2 {
    padding-right: 0;
  }
  #trx-wrapper-3 {
    padding-right: 0;
  }
  #trx-wrapper-4 {
    padding-right: 0;
  }
  #disadvantages-energy-card {
    flex-direction: column;
    grid-template-columns: 1fr;
  }
  .services-card-container {
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    width: 100%;
  }
  .services-card-container .energy-card {
    width: 100%;
    margin-right: 0;
  }
  .calculator-renting-container input {
    font-size: 1.2rem;
    font-weight: bold;
  }
  /* .energy-card .input-section .input-wrapper {
    width: 100%;
  } */
  /* .transaction-section input {
    width: 120px;
  } */
  .energy-card .cards-wrapper {
    flex-direction: column;
  }
  .energy-card h2 {
    font-size: 1.2rem;
  }
  .resource-section {
    margin-top: 15px;
  }
  .resource-energy-wrapper span {
    padding-right: 10px;
  }
  .choose-us-container {
    grid-template-columns: 1fr 1fr;
    gap: 50px 15px;
  }
  .choose-us-card {
    width: 7.5rem;
    height: 100%;
  }
  .left-column h2 {
    font-size: 1rem;
  }
  .left-column ul li {
    line-height: 1.2rem;
  }
  .renting-energy .renting-input-fields {
    display: grid;
  }
  .renting-energy .right-input {
    margin-top: 1rem;
  }
  .jackpot-animations-2 h3 {
    font-size: 1rem;
    text-align: center;
  }
  .jackpot-animations-1 h3 {
    font-size: 1rem;
  }
  #disadvantages-energy-card .disadvantages-section {
    height: auto;
  }
  .labels-cost {
    justify-content: left;
    padding-left: 20px;
    flex-wrap: wrap;
    gap: 10px;
  }
}
@media (max-width: 360px) {
  /* .input-container input {
    width: 200px;
  } */
}