.whatsapp-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 15px;
    filter: drop-shadow(0 0 8px rgba(0, 255, 0, 0.7));
}

.whatsapp-anchor {
    display: inline-block;
    cursor: pointer;
}

.gmail-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-left: 15px;
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.7));
}

.gmail-anchor {
    display: inline-block;
    cursor: pointer;
}


@media(max-width: 600px){
    .gmail-img{
       display: none;
    }
    
    .whatsapp-img{
        display: none;
    }
}

.hidden-charges{
    opacity: 0.6;
}

.nocharges{
    text-align: center;
    margin-top: 30px;
    color: black;
    font-weight: bolder;
}

.comingsoon{
    color: white;
    opacity: 0.6;
}

.border-color-transparent-dark-very-light {
    border-color: rgba(35, 35, 35, .1) !important;
    font-weight: bold;
}

#extra{
    color: blue;
}

#extragreen{
       color: green;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
}

.hide{
    opacity: 0;
}

.border-color-transparent-dark-very-light{
    border-bottom: 1px solid
}

@media(max-width: 600px){
    .hide{
        display: none;
    }
}

.logo {
    width: 500px;
    animation: float 3s infinite ease-in-out;
    border-radius: 100px;
}

@keyframes float {
    0% { transform: translateY(0);}
    50% { transform: translateY(-8px);}
    100% { transform: translateY(0);}
}

@media(max-width: 600px){
    .logo{
        display: none;
    }
}

.blur-text-1 {
  opacity: 0;
  filter: blur(20px);
  animation: blurIn 1.6s ease forwards;
}

@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.blur-text-2 {
  opacity: 0;
  filter: blur(20px);
  animation: blurIn 2s ease forwards;
}

@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.blur-text-3 {
  opacity: 0;
  filter: blur(20px);
  animation: blurIn 2.6s ease forwards;
}

@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.blur-text-4 {
  opacity: 0;
  filter: blur(20px);
  animation: blurIn 2.6s ease forwards;
}

@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* From Uiverse.io by cssbuttons-io */ 
.btn-1 {
  position: relative;
  font-size: 17px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1em 2.5em;
  display: inline-block;
  cursor: pointer;
  border-radius: 6em;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
  font-weight: 500;
  color: black;
  background-color: white;
}

.btn-1:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.btn-1:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.btn-1::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
}

.btn-1::after {
  background-color: #000000;
}

.btn-1:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}

/* CARD */ 

.card-1 {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 290px;
  height: 320px;
  background: rgb(21, 238, 231);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
}

.card-1::before,
.card-1::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  background-color: rgb(134, 225, 255);
  transition: all 0.5s;
}

.card-1::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}

.card-1::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100%  0 15px;
}

.card-1:hover::before,
.card-1:hover:after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  transition: all 0.5s;
}

.card-1:hover:after {
  content: attr(data-text);
}

/* CARD */

.box-text{
    align-items: center;
}

.center-align{
  margin-left: 30px;
}

.sgnmeup{
  margin-left: 350px;
}

.icn-cntct {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.icn-cntct:hover::after {
    content: attr(data-text);
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap; /* VERY IMPORTANT */
}

.centercon{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.centerplan,
.centerplan-mobile {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: fit-content; /* keeps the box tight and centered */
}

.pic{
  object-fit: cover;
  border-radius: 100px;
  margin-top: 10px;
}

.gap {
  margin-top: 20px;
  transition: all 0.3s ease;
}

.gap:hover {
  transform: translateY(-5px);
}

.whatsapp-anchor:hover,.gmail-anchor:hover{
  transform: translateY(-5px);
}

.me-auto{
  transition: transform 0.3s ease;
}
.me-auto:hover{
  transform: translateY(-5px);
}

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}