/* 
------------------HALO-------------------- */
/* 
  .bod {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: black;
    font-family: Arial, sans-serif;
    font-size: clamp(0.7rem, 2.7vw, 1.5rem);
  }

  
  .halo-wrap {
  position: relative;
    display: inline-block; 
}


.texto-halo {
  position: absolute;
  font-weight: bold;
  z-index: 0;
  transform: translateX(-4em);
  opacity: 0; 
  animation: none; 
    animation-delay: 0.6s;
}

.texto-halo.animate {
  animation: subTitleMmove 0.5s cubic-bezier(0.77,0.16,0.02,0.76)forwards;
      animation-delay: 0.6s;
}

@keyframes subTitleMmove {
  0% {
    opacity: 0;
    transform: translateX(-3em);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(-0em);
  }
}



.texto-halo, .halo-wrap {
  position: relative; 
}


.texto-halo{
  
}


.texto-halo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15em;   
  height: 6em;  
  border: 0.6em solid #bababa; 
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(65deg) rotateZ(45deg);
  clip-path: inset(50% 0% 0% 50%); 
  z-index: -1;
  opacity: 0;
    transform-style: preserve-3d;
}

.texto-halo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15em;
  height: 6em;
  border: 0.6em solid #757575;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(65deg) rotateZ(45deg);
  clip-path: inset(0% 50% 0% 0%); 
  z-index: 1;
    opacity: 0;

}


.halo-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15em;
  height: 6em;
  border: 0.6em solid #dbdbdb;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(65deg) rotateZ(45deg);
  clip-path: inset(0% 0% 50% 50%);
  z-index: 0;
  opacity: 1;

}

@keyframes revealRed {
  0% { clip-path: inset(0% 0% 550% 0%);   opacity: 0;}  
  100% { clip-path: inset(0% 50% 0% 0%);   opacity: 1;}  
}

@keyframes revealBlue {
  0% { clip-path: inset(100% 0% 0% 20%);  opacity: 0.7; }  
  100% { clip-path: inset(50% 0% 0% 50%);  opacity: 1; } 

}


.texto-halo.animate::after {
  animation: revealRed 1.4s ease-in-out forwards;
    animation-delay: 0.6s;
}

.texto-halo.animate::before {
  animation: revealBlue 0.4s cubic-bezier(0.25,0.80,0.92,0.29) forwards;
  animation-delay: 2s;
}
 */

/* ======================end halo============================= */

/* 
  .bod {
background-color: #fff ;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: black;
    font-family: Arial, sans-serif;
    font-size: clamp(0.7rem, 2.7vw, 1.5rem);
  }

  
  .halo-wrap {
  position: relative;
    display: inline-block; 
        font-size: clamp(3rem, 5vw, 4rem);
}


.texto-halo {
  position: absolute;
  font-weight: bold;
  z-index: 0;
  transform: translateX(-4em);
  opacity: 0; 
  animation: none; 
    animation-delay: 0.6s;
}

.texto-halo.animate {
  animation: subTitleMmove 0.5s cubic-bezier(0.77,0.16,0.02,0.76)forwards;
      animation-delay: 0.6s;
}

@keyframes subTitleMmove {
  0% {
    opacity: 0;
    transform: translateX(-3em);
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: translateX(-0em);
  }
}



.texto-halo, .halo-wrap {
  position: relative; 
}


.texto-halo{
  
}


.texto-halo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;   
  height: 2em;  
  border: 0.2em solid #bababa; 
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(65deg) rotateZ(45deg);
  clip-path: inset(50% 0% 0% 50%); 
  z-index: -1;
  opacity: 0;
    transform-style: preserve-3d;
}

.texto-halo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;
  height: 2em;
  border: 0.2em solid #757575;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(65deg) rotateZ(45deg);
  clip-path: inset(0% 50% 0% 0%); 
  z-index: 1;
    opacity: 0;

}


.halo-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4em;
  height: 2em;
  border: 0.2em solid #dbdbdb;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(65deg) rotateZ(45deg);
  clip-path: inset(0% 0% 50% 50%);
  z-index: 0;
  opacity: 1;

}

@keyframes revealRed {
  0% { clip-path: inset(0% 0% 550% 0%);   opacity: 0;}  
  100% { clip-path: inset(0% 50% 0% 0%);   opacity: 1;}  
}

@keyframes revealBlue {
  0% { clip-path: inset(100% 0% 0% 20%);  opacity: 0.7; }  
  100% { clip-path: inset(50% 0% 0% 50%);  opacity: 1; } 

}


.texto-halo.animate::after {
  animation: revealRed 1.4s ease-in-out forwards;
    animation-delay: 0.6s;
}

.texto-halo.animate::before {
  animation: revealBlue 0.4s cubic-bezier(0.25,0.80,0.92,0.29) forwards;
  animation-delay: 2s;
}




/* ==========end halo============== */ */








/* -----------------titles-------------------- */
.text_from_line_upper,
.line_from_center,
.iconContainer,
.imgCont {

}



.subtitles-cont{
  width: 100%;
  height: fit-content;
  margin-bottom: 4em;
  background-color: #fff;
}

.texty {
  font-size: 2.3em; 
  margin: 10px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

.text_from_line {
    overflow: hidden;
    vertical-align: middle;
    height: 1.5em;
    z-index:0;
}

.group_text_from_line {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 50%;
  max-width: 50em;
  margin: auto;
  transition: ease;
}



.text_from_line_upper {
  line-height: 1.5em;
  -webkit-animation: 2s ease 0s normal forwards  showinguptext;
    animation-play-state: paused;
}

@keyframes showinguptext {
  0% {line-height: 4em;}
  50% {line-height: 4em;}
  100% {line-height: 1.5em;}
}




.lineContainer{
    margin-top: 0.5em;
  overflow: visible;
  position: relative;
  width: 24%;
   max-width: 24em;
   margin-left: auto;
   margin-right: auto;
}

.line_from_center {
  position: relative;

  background-color: black;
  margin: auto; 
  width: 0%;
  height: 1px;
  -webkit-animation: 2s ease 0s normal forwards  showingline;
   animation-play-state: paused;
}

@keyframes showingline {
  0% {width: 0%;}
  100% {width: 100%; max-width: 20em;}
}


.iconContainer{

  display: flex;
  top: 50%;          
  left: 50%;         
  transform: translate(-50%, -50%);
  transform:translateY(-0%, -50%) ;
  position: absolute;
  background-color: #fff;
  border: 0px solid #fff;
  height: 3em;
  width: 3em;
   -webkit-animation: 2s ease 0s normal forwards  expandIiconContainer;
   animation-delay: 0.2s;
     animation-play-state: paused;
}


@keyframes expandIiconContainer {
  0% {width: 0em; height: 0em ; border: 0px solid #fff;}
  50% {width: 0em; height: 0em ;  border: 0px solid #fff;}
  100% {width: 3em; height: 3em ;  border: 7px solid #fff;}
}




.imgCont {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #333;
     -webkit-animation: 2s ease 0s normal forwards  iconNasconto;
       animation-play-state: paused;
}


.imgCont i {
   font-size: 100%;          
  line-height: 1;   
  transform: translateY(90%);        
  display: block;            
  text-align: center; 
}


@keyframes iconNasconto {
  0% {opacity: 0;}
  80% {opacity: 0; }
  100% {opacity: 1; }
}



.text_from_line_upper.animate {
  animation: 2s ease forwards showinguptext;
}

.line_from_center.animate {
  animation: 2s ease forwards showingline;
}

.iconContainer.animate {
  animation: 2s ease forwards expandIiconContainer;
  animation-delay: 0.2s;
}

.imgCont.animate {
  animation: 2s ease forwards iconNasconto;
}


/*  ================end titles animations=============== */








/* ------mobile responsive------- */

@media (max-width: 700px) {

  
.lineContainer{
    margin-top: 0.5em;
  overflow: visible;
  position: relative;
  width: 100%;
   max-width: 40em;
   margin-left: auto;
   margin-right: auto;
}

.group_text_from_line {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: auto;
  transition: ease;
}




}