.tracos{ position:relative;transform: translatex(160px) translateY(-400px);z-index: 0;
  background: linear-gradient(180deg, rgb(248, 137, 73), rgb(248, 82, 49));
  box-shadow: 0 0.1rem 0.8rem rgb(254, 100, 70);
    z-index:1;
  margin-inline: auto;
  width: 100%;
max-width: 400px;
margin: auto auto; 
height: 360px;
  
border-radius: 32%
;
 
  }





 
   
    




  .imagemhome img{border-radius: 32%
    ;    filter: drop-shadow(6px 6px 6px 0px  rgba(252, 127, 9, 0.4));  box-shadow: 6px 6px 6px 0px rgba(252, 127, 9, 0.4);

 scale: 0.8; }
  


.imagemhome {
  margin-inline: auto;position: relative;transform: translatex(160px) translateY(-100px); z-index: 2;  width: 100%;
  max-width: 550px;
  margin: auto auto; height: 450px;
  
}




.tracejado svg{position: relative; height: 500px; transform: translateX(350px) translateY(-1100px);z-index: 0;}









.buum button{transform: translateX(155px) translateY(-1300px);}

.budois button{transform: translateX(650px) translateY(-1300px);}

.butres button{transform: translateX(210px) translateY(-1435px);}

.buquatro button{transform: translateX(575px) translateY(-1450px);}

.bucinco button{transform: translateX(390px) translateY(-1520px);}


.buum svg {fill: #ffffff; height: 25px; width: 25px; }

.budois svg{fill: #ffffff;height: 25px; width: 25px;}

.butres svg{fill: #ffffff;height: 25px; width: 25px;}

.buquatro svg{fill: #ffffff;height: 25px; width: 25px;}

.bucinco svg{fill: #ffffff;height: 25px; width: 25px;}

.home__image{position:relative;isolation: isolate;max-width: 650px;min-width: 100px; max-height: 450px;min-height: 100px;align-items: center; justify-content: center;margin-top: 100px;}

.imges{position:relative;}

.home__container {
  display: grid;
  gap: 2rem;
margin-top: 85px; margin-bottom: 5px;
}

.home__div {background-image: linear-gradient(
  180deg,
  rgba(255, 102, 0, 0.014) 0%,
  #ffffff 25%,

  #ffffff 75%,
  #ffffff 84%,
  #ffffff 100%
);filter: blur(80%);}



.home__content .section__subheader {
  font-size: 1.2rem;
  color: var(--primary-color);
}

.home__content h1 {
  margin-bottom: 1rem;
  font-size: 4.75rem;
  font-weight: 500;
  line-height: 5.5rem;
  color: var(--text-dark);
  text-align: center;
}

.home__content p {
  margin-bottom: 2rem;
  line-height: 2rem;
  color: var(--text-light);
  text-align: center;
}

.home__btns {
  display: flex;
  
  gap: 2rem;
}


.home__btns a {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-light);
  transition: 0.3s;
}

.home__btns a:hover {
  color: var(--text-dark);
}

.home__btns a span {
  padding: 6px 12px;
  font-size: 1rem;
  color: var(--white);
  background-color: var(--primary-color);
  box-shadow: 2px 2px 20px rgba(224, 105, 81, 0.5);
  border-radius: 100%;
}





@media (width > 866px) {
  
  
  .home__container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

 

  .home__content :is(.section__subheader, h1, p) {
    text-align: left;
  }

  .home__btns {
    justify-content: flex-start;
  }
  .home__image{transform: translateX(-100px);}

  
}


@media (width < 866px) {
  
  

  .home__image{transform: translateX(-100px);scale: 1.2;}

  
}





@media (width < 539px) {

  .home__image{scale: 1; }
  }

  @media (width < 476px) {

    .home__image{scale: 0.8; height: 250px; translate: 20px -150px;}
    }


@media (width < 866px) {

  .home__image{transform: scale(1.2);margin-left: -230px;}
  .home__image{ justify-self: center;}

  
  
  .home__image {    grid-area: 1;
  
    margin-bottom: -100px; margin-top: 260px;
  }


  .home__btns {
    justify-content: center;
  
  
  
  
  }


  .home__container {
    grid-template-columns: 1fr ;
    align-items: center;
  }


      
      
 




}
  
  
  
  
  @media (width < 600px) {
  
  
  
   
  
    .tracos {   max-width: 350px; height: 350px ;
    }
  
  
  .tracofinal{max-width: 350px; height: 350px ;}}
  
  

  @media (width > 866px) {
    .home__image{transform: translateX(-100px);}

  
  }




    @media (width < 1250px) {
  
  
  
      .imagemhome { max-width: 450px; height: 450px ; transform: translatex(80px) translateY(-50px);}
      
      
        .tracos {   max-width: 350px; height: 350px ;transform: translatey(-400px) translateX(100px);;
        }
      
      
      .tracofinal{max-width: 400px; height: 400px ;transform: translateY(-1400px) translateX(100px);}
    
      .buum button{transform: translateX(150px) translateY(-1250px);}

      .budois button{transform: translateX(540px) translateY(-1250px);}
      
      .butres button{transform: translateX(190px) translateY(-1360px);}
      
      .buquatro button{transform: translateX(490px) translateY(-1360px);}
      
      .bucinco button{transform: translateX(330px) translateY(-1420px);}
      
      
      .buum svg {fill: #ffffff; height: 20px; width: 20px; }
      
      .budois svg{fill: #ffffff; height: 20px; width: 20px; }
      
      .butres svg{fill: #ffffff; height: 20px; width: 20px; }
      
      .buquatro svg{fill: #ffffff; height: 20px; width: 20px; }
      
      .bucinco svg{fill: #ffffff; height: 20px; width: 20px; }

      .buttons{
        height: 50px;width: 50px;
        }
      }















      @media (width < 900px) {
  

      .cardz {
       
        flex-direction: column;justify-content: center;        
align-items: center;
        
      }
      
      
    
      
      
      .infosz {
        flex-direction: column;
        justify-content: center;        
align-items: center;text-align: center;
      }
    
    
    
      .statsz {position: relative;transform: translatex(30%);margin:0; padding-top: 50px;padding-bottom: 0;}}




      @media (width < 668px) {
  
      
      
      
        .statsz {position: relative;transform: translatex(25%);margin:0; padding-top: 50px;padding-bottom: 0;}}


        @media (width < 566px) {
  
      
      
      
          .statsz {position: relative;transform: translatex(20%);margin:0; padding-top: 50px;padding-bottom: 0;}}


          @media (width < 496px) {
  
      
      
      
            .statsz {position: relative;transform: translatex(10%);margin:0; padding-top: 50px;padding-bottom: 0;}}
  
            @media (width < 468px) {
  
      
      
      
              .statsz {position: relative;transform: translatex(-0%);margin:0; padding-top: 50px;padding-bottom: 0;}}
    

      @media (width < 976px) {
  
  
  
        .imagemhome { max-width: 400px; height: 400px ; transform: translateX(80px) translateY(-150px);}
        
        
          .tracos {   max-width: 300px; height: 300px ;transform: translateX(95px) translateY(-450px)
          }
        
        
        .tracofinal{max-width: 350px; height: 350px ;transform: translateX(90px) translateY(-1200px)}
      
        .buum button{transform: translateX(90px) translateY(-1050px);}
  
        .budois button{transform: translateX(440px) translateY(-1050px);}
        
        .butres button{transform: translateX(110px) translateY(-1145px);}
        
        .buquatro button{transform: translateX(410px) translateY(-1145px);}
        
        .bucinco button{transform: translateX(260px) translateY(-1220px);}
        
        
        .buum svg {fill: #ffffff; height: 20px; width: 20px; }
        
        .budois svg{fill: #ffffff; height: 20px; width: 20px; }
        
        .butres svg{fill: #ffffff; height: 20px; width: 20px; }
        
        .buquatro svg{fill: #ffffff; height: 20px; width: 20px; }
        
        .bucinco svg{fill: #ffffff; height: 20px; width: 20px; }
  
        .buttons{
          height: 50px;width: 50px;
          }


          .tracejado svg{height: 300px;}
        }