:root{
    --caixa: hsl(240, 2%, 24%);
    --caixa2: hsl(240, 1%, 33%);
    --texto: hsl(45, 63%, 77%);
    --titulo: hsl(45, 100%, 72%);
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #fff;
}
.box{
    background-color: var(--caixa);
    margin: 30px;
    padding: 20px;                 
    border-radius: 15px;
}

h1, h2, h3 {
    color: var(--titulo);
}
ul {
    margin-top: 0;
    padding-left: 1.2rem;
}
.highlight {
    border-left: 4px solid #3498db;
    padding: 1rem;
    margin: 1.5rem 0;
}
.cta {
    background-color: #3498db;
    color: #fff;
    padding: 1rem;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    margin-top: 2rem;
}
.cta:hover {
    background-color: #2980b9;
}
#bloco1{
    h2{
        font-size:45px;
        text-align: center;
        margin: 20px;
    }
    p{
        font-size: x-large;
        margin: 50px;
        text-align: justify;
        color: var(--texto);
    }
}
#b2{
    padding: 0px 0px 0px 50px;
}
#bloco2{    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;   
    margin: 20px;
    padding: 20px;                 
    border-radius: 15px;
    background-color: var(--caixa2);
    div{        
        ul{
            li{
                margin: 10px;            
                color: black;
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                font-size: x-large;
                color: var(--texto);
                background-color: hsl(240, 2%, 13%);
                border-radius: 17px;
                padding: 0px 5px 0px 0px;
                .bi{
                    margin: 10px;
                }
            }
        }
    }
    img{
        max-height: 300px;
        border-radius: 15px;
    }
}

#b3{
    padding: 20px 0px 0px 40px;
}
#bloco3{  
    margin: 20px;
    padding: 20px;                 
    border-radius: 15px;
    background-color: var(--caixa2);
    ul{
        li{
            border-radius: 15px;
            margin: 15px;
            padding: 0px 0px 0px 20px ;
            background-color: var(--caixa);
            color: var(--texto);
            font-size: 30px;
            i{
                padding: 5px;
                background-color: black;
                margin:  0px 10px 0px 0px;
            }         
        }
         img{
                border-radius: 15px;
            }  
        div{
            display: flex;
            flex-wrap: wrap;
            margin: 0px 0px 0px 100px;
            .imagep{
                margin: 0px 0px 10px 10px;
            }
        }
    }
}
#bloco5{
    margin: 20px;
    padding: 20px;                 
    border-radius: 15px;
    height: 500px;
    background-color: var(--caixa2);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    color: var(--texto);
    align-content: center;
    div{
        align-content: center;
        a{
            color: var(--texto);
            text-align: center;
            margin: 30px;
        }
    }
}
.image{
    max-width: 550px;
}
.imageh{
    max-height: 450px;
}
.imagep{
    max-height: 230px;
    margin: 20px;
}
.imagel{
    min-height: 20px;
}
.image, .imageh, .imagel{
    margin: 0px 0px 0px 100px;
}
#b5img{
    height: 400px;
    border-radius: 15px;
}
@media (max-width: 1100px) {
    #b5img{
       max-height: 280px;
    }
    #bloco2{
        img{
            max-height: 200px;
        }
    }
    .image{
        max-width: 400px;
        min-width: 200px;                
    } 
    .imageh{
        max-width: 300px;                
        min-width: 200px;                
    } 
    .imagep{
        max-width: 400px;                
        min-width: 200px;                
    }
    .imagel{
        max-width: 400px;                
        min-width: 200px;                
    }
}      
@media (max-width: 550px) {
    #b5img{
           max-height: 185px;
       }
    #bloco2{
        img{
            max-height: 170px;
        }
    }
    .image{
        max-width: 250px;
        min-width: 200px;                
    } 
    .imageh{
        max-width: 250px;                
        min-width: 200px;                
    } 
    .imagep{
        max-width: 300px;                
        min-width: 200px;                
    }
    .imagel{
        max-width: 300px;                
        min-width: 200px;                
    }
}         

#buttonnew{
  display: block;
  width: 350px;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  text-decoration: none;
  background: #333;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 3px solid #333;
  transition: all .35s;
}

.icon{
  width: 50px;
  height: 50px;
  border: 3px solid transparent;
  transform: rotate(45deg);
  right: 0;
  top: 0;
  z-index: -1;
  transition: all .35s;
}

.icon svg{
  width: 50px;
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  transform: rotate(-45deg);
  fill: #2ecc71;
  transition: all .35s;
}

#buttonnew:hover{
  width: 300px;
  border: 3px solid var(--texto);
  background: transparent;
  color: var(--titulo);
}

#buttonnew:hover + .icon{
  border: 3px solid #2ecc71;
  right: -25%;
}
@media screen and (max-width: 1100px) {
    .image, .imageh, .imagel, .imagep{
        margin: 0px 0px 0px 20px;
    }
    /*
    320
    480
    770
    1025
    */

    .box{
    width: 100%;
    margin: 7px;
    padding: 5px;  
    }
    #bloco1, #bloco2, #bloco3, #bloco5{
        margin: 5px;
        padding: 5px; 
    }
    #bloco1{
        h2{
            font-size:25px;
            margin: 10px;
        }
        p{
            font-size: larger;
            margin: 15px;
        }
    }
    #b4{
        font-size: 20px;
    }
    #b2, #b3{
        font-size: medium;
    }
    #bloco2{                    
        div{        
            ul{
                li{
                    font-size: small;
                }
            }
        }
    }
    #bloco3{                  
    ul{
        li{
            width: 90%;
            margin: 15px;
            padding: 0px 0px 0px 20px ;
            font-size: medium;
            i{
                padding: 5px;
                margin:  0px 10px 0px 0px;
            }         
        }
        div{
            margin: 0px;
        }
    }
}
#buttonnew{
  width: 250px;
  height: 40px;
  line-height: 35px;
  font-size: small;
}
}