/*============================
       css-app-0001
==============================*/
  .nav-item:hover .nav-link {
    color: #ffffff !important;
  }
  .nav-item:hover .nav-link i {
    color: #ffffff !important;
  }
  #searchForm input[type="tel"],
  #recharge-bill input[type="tel"],
  #selectedProduct {
    outline: none;
    height: auto; 
    padding: 10px; 
  }
  .my-section {
      margin-top: 50px;
      background: linear-gradient(to bottom, #03C988, #ffffff); 
      padding-top: 4px;
      padding-bottom: 3px;
  }
  .my-card {
      transition: border-radius 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  }

  .my-card:hover {
      border-radius: 0; 
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

.country {
  margin: 10px;
  text-align: center;
}
.rounded-image {
  border-radius: 50%;
  width: 1cm;
  height: 1cm;
  object-fit: cover; 
}

#rechargeWorldwide .popular-countries {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
}

#rechargeWorldwide .country-card {
  width: calc(33.33% - 20px); 
  max-width: 150px; 
  height: 150px; /* Altura fixa */
  margin-bottom: 20px; 
  width: 150px;
  height: 50px;
  background-color: #ffff; 
  overflow: hidden;
  position: relative;
  border-radius: 50px;
  flex-direction: column;
  align-items: center; 
  justify-content: center;
  transition: transform 0.3s ease-in-out; 
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); 
  transition: box-shadow 0.3s ease-in-out; 
}
#rechargeWorldwide .country-card:hover {
  transform: scale(1.1); 
  transition: transform 0.3s ease-in-out; 
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
  background: linear-gradient(to bottom, #87e990, #ffffff); 
}
.country-image {
  margin: auto;
  background-size: cover;
  background-position: center;
  margin-top: 7px; 
  margin-left: 5px;
  border-radius: 50%;
  width: 1cm;
  height: 1cm;
  object-fit: cover; 
}

#rechargeWorldwide .country-info {
display: flex;
align-items: center;
justify-content: center;
height: 4cm;
}
#rechargeWorldwide .country-name {
  margin-left: 50px; 
  padding: 10px;
  align-items: center;
  justify-content: center;
  margin-top: -200px; 
  color: #004225;
}
  @media screen and (max-width: 600px) {
  #rechargeWorldwide .country-card {
    width: calc(50% - 10px); 
  }
}
.carousel-container_loopper .carousel-containe,
#rechargeWorldwide .carousel-container {
  width: 100%;
  overflow: hidden;

}
.carousel-container_loopper .carousel,
#rechargeWorldwide .carousel {
  display: flex;
  width: 11%; 
  animation: scroll 20s linear infinite;
  margin-right: -10px; 
  flex-direction: row;
}
#logoCarouselloperator .logo-operator {
    flex: 0 0 100px;  
    height: 20px; 
    box-sizing: border-box;
    margin-right: 15px;
    /* margin-top: 45px; */
  }
#logoCarouselloperator .logo-operator img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1; 
    position: relative;
    opacity: 0.2; /* Ajuste a opacidade conforme necessário (0.7 significa 70%) */
  } 
  .carousel-container_loopper {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  #logoCarouselloperator .logo-operator::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(169, 169, 179, 1.8); 
  }


#rechargeWorldwide .logoCuntry {
  min-width: 100%;

}
#rechargeWorldwide .logoCuntry img {
  width: 40px; 
  height: 40px; 
  border-radius: 50%; 
  object-fit: cover; 

}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%); 
  }
}
  #mobileThreesteps .circle-option {
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 50%;
    /* overflow: hidden; */
    color: #000;
    position: relative;
    margin-bottom: 20px;
    left: 30%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); 
    transition: background-color 0.3s ease-in-out;

  }
  #mobileThreesteps .circle-option:hover {
    background-image: linear-gradient(135deg, #23bdb8 0%, #43e794 100%)
    }
    #mobileThreesteps .number-circle:hover {
    background-image: linear-gradient(45deg, #03C988, #ff4081);
    }
  .circle img {
    max-width: 100%;
    max-height: 100%;
  }
  #mobileThreesteps .circle-option:hover {
      transform: translateY(-5px); 
    }

  #mobileThreesteps .circle-option:active {
    transform: translateY(-5px); 
  }
  #mobileThreesteps .circle-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease-in-out; 

  }
  .rounded-card {
    border-radius: 20px; 
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.5); 
  }
  #mobileThreesteps .circle-content img {
  max-width: 100%;
}

  #mobileApp .bubble-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  #mobileApp .bubble {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
    animation: bubbleAnimation 4s linear infinite;
    margin-top: 23px;
  }

  #mobileApp .fa-circle {
    color: #ffffff; 
  }
  #mobileApp .download-heading {
    color: #004225;
  }
  @keyframes bubbleAnimation {
    0% {
      transform: translate(0, 0);
    }
    25% {
      transform: translate(100%, -100%);
    }
    50% {
      transform: translate(200%, 0);
    }
    75% {
      transform: translate(100%, 100%);
    }
    100% {
      transform: translate(0, 0);
    }
  }
#mobileApp .progress-bar_download-container {
width: 100%;
background-color: rgba(0, 66, 37, 0.1);
height: 20px;
border-radius: 10px;
overflow: hidden;
}

#mobileApp .progress-bar_download {
width: 100%;
height: 100%;
background-color: #90EE90;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px; 
animation: progressAnimation 5s linear infinite; 
}

@keyframes progressAnimation {
0% {
width: 0;
}
100% {
width: 100%;
}
}

.custom-margin-bottom {
  margin-top: 260px; 
}
/*----------------footer-----------*/
#footer .footer-section {
  background-color: #004225;
}

#footerMain .featured-box {
  color: #03C988;
}

#footerMain .featured-box h3,
#footerMain .featured-box h4 {
  color: #03C988;
}

#footerMain .star-background .star-icon {
  color: #FFD43B;
}

#footerMain .star-background .white-star {
  color: #fff;
}

#footerMain .icon-color {
  color: #03C988;
}

#footerMain .text-white {
  color: #ffffff;
}
#footerMain .text-verde-2 {
  color: #03C988;
}

#footerMain .footer-icon {
  color: #ffffff;
}

#footerMain .icon-circle_footer {
  display: inline-block;
  margin-right: 10px;
}

#footerMain .social-icons li a {
  color: inherit;
}

#footerMain .nav-item a {
  color: inherit;
  text-decoration: none;
}