* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "Poppins", sans-serif;
}

body {
    height: 100vh;
    background: #0f1724;
    
}


header {
    width: 100%;
    padding: 20px 30px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #000000;
    border-bottom: #7c3aed 1px solid;
}

header h1 {
    
    color: #ffffff;
}


header button {
    background-color: #7c3aed;
    border: none;
    color: #ffffff;
    padding: 13px 30px 13px 30px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
}

header button img {
    margin-right: 5px;
    height: 20px;
}


.teste-iptv {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    flex-direction: column;
    background-image: url(./src/imagens/imagem-fundo-teste.png);
    background-position: center;
    background-size: cover;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
       
    }
}

.teste-iptv h1 {
    color: #7c3aed;
    font-weight: bold;
    font-size: 40px;
    z-index: 9999;
}

.teste-iptv p {
    color: #ffffff;
    margin-top: 20px;
    font-size: 20px;
    z-index: 9999;
}

.categorias-teste {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin-top: 80px;
    z-index: 9999;
    flex-wrap: wrap;
}

.categorias-teste h3 {
    color: #ffffff;
    
}

.teste-filmes {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #000000;
    width: 130px;
    height: 200px;
    border-radius: 20px;
    border: 1px solid #7c3aed ;
}

.teste-filmes img {
    height: 50px;
}

.teste-filmes h3 {
    margin-top: 40px;

}





.teste-esporte {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #000000;
    width: 130px;
    height: 200px;
    border-radius: 20px;
    border: 1px solid #7c3aed ;
}

.teste-esporte img {
    height: 50px;
}

.teste-esporte h3 {
    margin-top: 40px;

}



.teste-news {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #000000;
    width: 130px;
    height: 200px;
    border-radius: 20px;
    border: 1px solid #7c3aed ;
}

.teste-news img {
    height: 50px;
}

.teste-news h3 {
    margin-top: 40px;

}


.teste-live {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #000000;
    width: 130px;
    height: 200px;
    border-radius: 20px;
    border: 1px solid #7c3aed ;
}

.teste-live img {
    height: 50px;
}

.teste-live h3 {
    margin-top: 40px;

}


.teste-hd {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #000000;
    width: 130px;
    height: 200px;
    border-radius: 20px;
    border: 1px solid #7c3aed ;
}

.teste-hd img {
    height: 50px;
}

.teste-hd h3 {
    margin-top: 40px;

}



.teste-4k {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #000000;
    width: 130px;
    height: 200px;
    border-radius: 20px;
    border: 1px solid #7c3aed ;
}

.teste-4k img {
    height: 50px;
}

.teste-4k h3 {
    margin-top: 40px;

}


.contagem-teste {
    gap: 25px;
    flex-wrap: wrap;
   display: flex;
   margin-top: 45px;
   z-index: 1;
   

}

.contagem-teste div {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 15px;
    border-radius: 20px;
    border: 1px solid #7c3aed ;

}




.contagem-teste p {
    margin: 0;
    font-size: 30px;
    font-weight: bold;
}

.teste-iptv button  {
    background-color: #7c3aed;
    border: none;
    color: #ffffff;
    padding: 20px 40px 20px 40px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    
}

.teste-iptv a {
    margin-top: 50px;
    z-index: 1;
}




.como-funciona {
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.como-funciona h1 {
    color: #7c3aed;
    font-size: 40px;
}

.containers-como-funciona {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 50px;
    gap: 50px;
    flex-wrap: wrap;
    
    
    
    
    
}

.containers-como-funciona div {
    text-align: left;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    min-width: 190px;
    min-height: 270px;
    padding: 50px;
    


}




.containers-como-funciona p {
    color: rgb(163, 163, 174);
    text-align: center;
    margin-top: 20px;
    
    
    
    
    
}





.Whats-como-funciona img {
    height: 60px;
    align-self: center;
    margin-bottom: 10px;

}

.data-como-funciona img {
    align-self: center;
    height: 60px;
    margin-bottom: 10px;
    



}

.receive-como-funciona img {
    align-self: center;
    height: 60px;
    margin-bottom: 10px;
    


}










.containers-como-funciona h1 {
    font-size: 20px;
}




.containers-como-funciona i {
    font-size: 50px;
    margin-bottom: 20px;
}

.como-funciona button {
    margin-top: 50px;
    background-color: #7c3aed;
    border: none;
    color: #ffffff;
    padding: 20px 40px 20px 40px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;



}



.porque-escolher {
    position: relative;
    padding: 50px 0px 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(./src/imagens/iptv\ gratis\ full\ hd.png);
    background-position: center;
    background-size: cover;
    

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

   
}

.porque-escolher h1 {
    color: #7c3aed;
    font-size: 40px;
    z-index: 1;

    
}

.containers-escolher {
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding: 50px;
    
}


.containers-escolher h1 {
    font-size: 20px;
    text-align: center;
    color: #7c3aed;
    
}

.containers-escolher p {

    color: rgb(163, 163, 174);
    text-align: center;
    margin-top: 20px;
}



.containers-escolher div {
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1 1 calc(33.333% - 40px);
    min-width: 200px;
    min-height: 270px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
}

.containers-escolher img {
    margin-bottom: 10px;

}

.porque-escolher button {
    background-color: #7c3aed;
    border: none;
    color: #ffffff;
    padding: 20px 40px 20px 40px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;



}

.porque-escolher a {
    margin-top: 50px;
    z-index: 1;
}







.melhores-apps {
    padding: 50px 0px 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.melhores-apps button {

    margin-top: 50px;
    background-color: #7c3aed;
    border: none;
    color: #ffffff;
    padding: 20px 40px 20px 40px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}


.melhores-apps h1{
    color: #7c3aed;
    font-size: 40px;

    
}

.containers-melhores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding: 50px;
    
}



.containers-melhores h1 {
    font-size: 20px;
    text-align: center;
    color: #7c3aed;
    
}

.containers-melhores img {
    height: 90px;
    margin-bottom: 30px;
}

.containers-melhores p {

    color: rgb(163, 163, 174);
    text-align: center;
    margin-top: 20px;
}



.containers-melhores div {
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1 1 calc(25% - 40px); 
    min-width: 200px;
    min-height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
}





.Planos {
    position: relative;
    padding: 50px 0px 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(./src/imagens/iptv\ top\ listas.png);
    background-position: center;
    background-size: cover;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }
}

.Planos button {
    background-color: #7c3aed;
    border: none;
    color: #ffffff;
    padding: 20px 40px 20px 40px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;
    
}

.Planos a {
    margin-top: 50px;
    z-index: 1;
}




.Planos h1{
    color: #7c3aed;
    font-size: 40px;
    z-index: 1;

    
}

.containers-planos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding: 50px;
    z-index: 1;
    
}



.containers-planos h1 {
    font-size: 20px;
    text-align: left;
    color: #7c3aed;
    
}

.containers-planos img {
    height: 90px;
    margin-bottom: 30px;
}

.containers-planos ul li {

    color: rgb(163, 163, 174);
    text-align: left;
    margin-top: 20px;
}



.containers-planos div {
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1 1 calc(25% - 40px); 
    min-width: 200px;
    min-height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
}


.avaliações {
    padding: 100px 0px 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.avaliações button {

    margin-top: 50px;
    background-color: #7c3aed;
    border: none;
    color: #ffffff;
    padding: 20px 40px 20px 40px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}


.avaliações h1{
    color: #7c3aed;
    font-size: 40px;

    
}

.containers-avaliações {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
    justify-content: center;
    padding: 50px 10px 10px 10px;
    flex: 1 1 calc(33.333% - 40px); 
    margin-top: 10px;
    
}



.containers-avaliações span {
    font-size: 20px;
    text-align: left;
    color: gold;
    
}



.containers-avaliações p {

    color: rgb(163, 163, 174);
    text-align: center;
    margin-top: 20px;
}




.avaliação-1 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.avaliação-2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.avaliação-3 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.avaliação-4 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.avaliação-5 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.avaliação-6 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.avaliação-7 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.avaliação-8 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.avaliação-9 {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 350px;
    height: 350px;
    background-color: #000000;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    padding: 50px;
    
    
    
}

.classificação {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid grey ;
    margin-bottom: 10px;
}

.classificação p {
    margin-bottom: 15px;
}


.perguntas {
    position: relative;
    padding: 50px 0px 50px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url(./src/imagens/como\ usar\ iptv\ no\ pc.jpg);
    background-position: center;
    background-size: cover;

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }
}




.perguntas h1{
    color: #7c3aed;
    font-size: 40px;
    z-index: 1;
    

    
}

.conteiners-perguntas {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
    padding: 60px 0px 60px 0px;
}

details {
    display: flex;
    flex-direction: column;
    background-color: #000000;
    width: 70%;
    padding: 50px;
    transition: transform 0.5s ease;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    
}

details p {
    margin-top: 20px;
    color: rgb(163, 163, 174) ;
}

summary {
  display: flex;
  align-items:center ;
  color: #ffffff ;
  list-style: none;
  cursor: pointer;
  position: relative;
  font-size: 1.1rem;
  font-weight: 500;
  padding-left: 25px;
}

summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  transition: transform 0.5s ease;
  color: #7b3ff3;
  font-size: 30px;
}


details[open] summary::before {
  transform: rotate(90deg);
}



.inicie-teste {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 50px 0px 50px 0px;
}

.inicie-teste button {
    margin-top: 50px;
    background-color: #7c3aed;
    border: none;
    color: #ffffff;
    padding: 20px 40px 20px 40px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}


.inicie-teste h1{
    color: #7c3aed;
    font-size: 40px;

    
}

.containers-inicie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    align-items: center;
    justify-content: center;
    padding: 50px;
    
}

.containers-inicie div {
    display: flex;
    background-color: #000000;
    padding: 30px;
    transition: transform 0.5s ease;
    border-radius: 20px;
    border: 1px solid #7c3aed;
    
    
}

.containers-inicie img {
    height: 70px;
    
    
}



.containers-inicie h1 {
    font-size: 20px;
    text-align: left;
    color: gold;
    
}



.inicie-teste p {

    color: rgb(163, 163, 174);
    text-align: left;
    margin-top: 20px;
}

footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #000000;
    border-top: 1px solid #7c3aed;
    
    

}

.descrição {
    padding: 10px;
}

.conteiners-descrição {
    display: flex;
    padding: 50px 50px 10px 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-bottom: 1px solid gray;
    width: 100%;
    

}

.conteiners-descrição h1 {
    color: #ffffff;
    font-size: 40px;
    
}

.conteiners-descrição p {
    color: rgb(163, 163, 174);
    margin-top: 30px;
    line-height: 40px;
    
}

.direitos {
    padding: 50px;
}

.direitos p {
    color: rgb(163, 163, 174);
    
}

.termos {
    display: flex;
    gap: 20px;
    border-top: 1px solid #7c3aed;
    width: 100%;
    padding: 10px;
}

.termos a {
    color: #ffffff;
}


@media (max-width: 768px) {

    *{
        text-align: center;
        
    }
    header button {
        display: none;
    }

    .contagem-teste {
        display: flex;
        justify-content: center;
    }

    




}