/* Pensado, escrito e revisado por: João Raylisson (@raylissonx)*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    height: 100%;
}

body {
    min-height: 100%;
    font-size: 62.5%;
    font-family: "Poppins", sans-serif;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
}

header {
    height: auto;
    min-width: 100%;
    top: 0;
    background-color: #FFFFFF;
    display: flex;
    position: fixed;
    justify-content: center;
    z-index: 100;
}

    .headerBlock {
        width: 100%;
        padding: 20px 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
        .logoHeader {
            height: 25px;
        }
        
        .btnMenuHeader {
            height: 20px;
        }

main {
    flex: 1;
    min-height: 100vh;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

/* Wrapper's e Container's - estilos fixos */

.wrapper {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .container, .footerContainer {
        height: auto;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    
        section {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        
footer {
    height: auto;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .footerContent {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    
/* Wrapper's, container's e outras coisas - estilos individuais */

:root {
    --esqDir: 30px;
}

.wrapperUm {
    padding: 80px var(--esqDir);
    background-color: #000014;
    position: relative;
    overflow: hidden;
}

    .wrapperUm::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        background: linear-gradient(to top, #00D7BC, #0068DB, transparent);
        width: 100%;
        height: 350px;
        z-index: 0;
        pointer-events: none;
    }
    
    .wrapperUm > * {
        position: relative;
        z-index: 1;
    }

        .containerUm {
            justify-content: center;
        }

    .secaoUm {
        color: #FFFFFF;
        gap: 100px;
        align-items: center;
    }
    
        .infosTextoSectionUm {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
        }
    
            .infosTextoSectionUm > h1 {
                font-size: clamp(2.2rem, 5vw, 2.5rem);
                line-height: 1.25;
                text-align: center;
            }
        
            .infosTextoSectionUm > p {
                color: #C2C2FF;
                font-size: 0.96rem;
                text-align: center;
            }
                
            .infosTextoSectionUm > .btnHeroSection {
                border-radius: 8px;
                position: relative;
                overflow: hidden;
                margin-top: 20px;
                background: #FFFFFF;
                border: none;
                padding: 10px 40px;
                font-family: "Poppins", sans-serif;
                color: #FFFFFF;
                font-size: 0.9rem;
                display: inline-block;
                width: auto;
                cursor: pointer;
                z-index: 0;
            }
            
                .btnHeroSection::before {
                    content: '';
                    position: absolute;
                    inset: 0;
                    z-index: -1;
                    background: linear-gradient(90deg, #0068DB, #00D7BC);
                    transition: opacity .5s ease;
                    opacity: 1;
                }
                
                    .btnHeroSection:hover::before {
                        opacity: 0;
                    }
                    
                    .btnHeroSection:hover {
                        color: #000014;
                    }
                    
        .imgAreaSectionUm {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
            .imgAreaSectionUm > img {
                width: 100%;
            }
            
.wrapperDois {
    padding: 80px var(--esqDir);
}

    .containerDois {
        justify-content: center;
    }
    
        .secaoDois {
            align-items: center;
            gap: 40px;
        }
        
            .infosTextoSectionDois {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 18px;
                text-align: center;
            }
            
                .nomeSecaoDois {
                    color: #FFFFFF;
                    background: linear-gradient(to left, #00D7BC, #0068DB);
                    padding: 3px 10px;
                    font-size: 0.8rem;
                    border-radius: 5px;
                }
            
                .infosTextoSectionDois > h2 {
                    color: #000014;
                    font-size: 1.85rem;
                    line-height: 1.25;
                }
                
                .infosTextoSectionDois > p {
                    color: #000014;
                    font-size: 0.96rem;
                }
                
            .infosInclusosS2Area {
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 20px;
            }
            
                .infosInclusosS2Item {
                    width: 100%;
                    padding: 30px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 5px;
                    border-radius: 7px;
                    background-color: #DFEDFF;
                    text-align: center;
                }
                
                    .imgS2Item {
                        width: 70px;
                        border-radius: 50%;
                    }
                    
                    .h3S2Item {
                        font-size: 1.2rem;
                        margin-top: 15px;
                    }

                    .pS2Item {
                        font-size: 0.9rem;
                    }
            
.wrapperFooter {
    padding: 0 var(--esqDir);
}

/* Tablet */
@media screen and (min-width: 768px) {
  
:root {
    --esqDir: 60px;
}
  
.headerBlock {
    padding: 20px var(--esqDir);
}

.wrapperUm {
    padding: 130px 60px 130px 60px;
}

    .wrapperUm::after {
        height: 180px;
    }
    
    .secaoUm {
        width: 70%;
    }
    
        .imgAreaSectionUm {
            display: none;
        }
        
.wrapperDois {
    padding: 100px 60px;
}

    .infosInclusosS2Area {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }
    
        .infosInclusosS2Item {
            height: 100%;
            justify-content: flex-start;
        }
        
        .ultimoItemS2 {
            grid-column: 1 / -1;
            justify-self: center;
            width: fit-content;
        }

.wrapperFooter {
    padding: 0 60px;
}
    
}

/* Laptop */
@media screen and (min-width: 1200px) {
    
.headerBlock {
    padding: 20px 100px;
}
    
.wrapper {
    padding: 0 100px;
}

.wrapperUm {
    padding: 170px 100px;
}

    .wrapperUm::after {
        height: 180px;
    }

        .secaoUm {
            width: 100%;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            gap: 100px;
        }
        
            .infosTextoSectionUm {
                width: 50%;
                align-items: flex-start;
            }
    
              .infosTextoSectionUm > h1 {
                   font-size: 2.8rem;
              }
            
                .infosTextoSectionUm > h1, .infosTextoSectionUm > p {
                    text-align: initial;
                }
        
            .imgAreaSectionUm {
                width: 50%;
                display: block;
            }
            
    .wrapperDois {
        padding: 100px;
    }

        .infosTextoSectionDois > p {
            width: 60%;
        }

        .infosInclusosS2Area {
            grid-template-columns: repeat(3, 1fr);
        }
        
            .ultimoItemS2 {
                grid-column: auto;
                justify-self: stretch;
                width: 100%;
            }
    
}

/* Desktop */
@media screen and (min-width: 1440px) {

/* Individuais */
.headerBlock {
     padding: 20px 200px;
 }

 .wrapper {
    padding: 0 200px;
 }

.wrapperUm {
    padding: 150px 200px;
}

     .infosTextoSectionUm > h1 {
               font-size: 3.2rem;
          }

.wrapperDois {
    padding: 100px 200px;
}
    
}

/* Desktop maior e widescreen */
@media screen and (min-width: 1920px) {

/* Fixo */
.headerBlock, section {
    max-width: 1200px;
}

/* Individuais */
.headerBlock {
     padding: 20px 0;
 }

}