body {
    margin: 0;
    min-height: 100vh; 
    position: relative; /* Importante para posicionar o ::before */
    z-index: 1; /* Garante que o conteúdo do body fique acima do ::before */
    font-family: "Quicksand", sans-serif;
}

/*descktop*/
@media (min-width: 768px) {

body::before {
    content: ''; /* Essencial para que pseudo-elementos funcionem */
    position: fixed; /* Fixa o overlay na viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('cachoeirafinal.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    opacity: 0.6; /* Ajuste este valor entre 0 (totalmente transparente) e 1 (totalmente opaco) */
    z-index: -1; /* Coloca o overlay atrás do conteúdo do body */
}

.container-principal {
    max-width: 1440px; /* ou 1200px, 1440px, 1600px, etc. */
    margin: 0 auto;
    padding: 0 20px; 
    
  }

.cabecalho{
   
    background: rgb(228, 244, 252);
    height: 8em;
    box-shadow: 2px 5px 5px #88c0acd2 ;
    /*box-shadow: 2px 5px 5px  rgb(228, 244, 252);*/
    /*border-radius: 4px;*/
    display: flex;
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 4em;
    
}
#logo{
    background-image: url('oliveira-stack.png.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 10em;
    height: 8em;
    margin-top: -1em;
    margin-left: 1em;
    
}

.botoescabeçalho{
    display: flex;
    text-decoration: none;
    margin-top: 2.2em;
    margin-left: 15.5em;
    gap: 6em;
}
.textobotoescabeçalho{
    font-size: 20px;
    margin-left: 0.5em;
    color: #11998e;
   
}

.container1{
    width: 100%;
    height: 10em;
    background: rgba(181, 234, 215, 0.288);
    min-height: 72vh;
    border-radius: 4px;
    
   
}

.container2{
   
    height: 10em;
    background: rgba(181, 234, 215, 0.288);
    min-height: 92vh;
    border-radius: 4px;
}

#cachoeira{
    background-image: url('cachoeiramulherMobileFinal.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 15em;
    height: 27em;
    float: right;
    margin-right: 10em;
    border-radius: 10px;
    margin-top: -22.8em;
}

#cachu{
    display: none;
}

#entreemcontato {
    font-size: 15px;
    cursor: pointer;
    width: 11em;
    height: 3em;
    color: white;
    border: none;
    border-radius: 4em;
    border: 0.1px solid #555;
    text-shadow:
      -1px -1px 0 #000,
       1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
       background: radial-gradient(circle at center, #ffca8a 0%, #fda32dec 100%);
       box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.747);

    margin-left: 10em;
    margin-top: 10em;
    
  }
  #entreemcontato:hover{
    transition: 2s;
    transform: scale(1.05);
  }

  #text1{
    margin-left: 5em;
    margin-top: 2em;
  }

#familia{
    background-image: url('felizfamiliaUltimo.png');
    width: 100%;
    height: 35em;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    border-radius: 4px;
}


#texto2{
    color: orange;
    margin-left: 5em;
    margin-top: 3em;
}

#resultados{
    background-image: url('meninamobile.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 15em;
    height: 27em;
    float: right;
    margin-right: 10em;
    border-radius: 10px;
    margin-top: -27em;

}

#texto3{
    margin-left: 5em;
}

#result{
    display: none;
    width: 100%;
    height: auto;
}


#moça{
    background-image: url('moçafeliz.png');
    width: 100%;
    height: 35em;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    border-radius: 4px;
}
#texto4{
    /*color: #11998e;*/
    color: rgb(255, 115, 0);
    margin-left: 18em;
    margin-top: 12em;
    font-size: 20px;
    background: #88c0ac4d;
    height: 9em;
    width: 28em;
    padding-left: 3em;
    border-radius: 1em;
}

#man{
    background-image: url('man3.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 15em;
    height: 27em;
    float: right;
    margin-right: 10em;
    border-radius: 10px;
    margin-top: -20.8em;
}
#texto5{
    color: #11998e;
    /*color: rgb(255, 115, 0);*/
    margin-left: 5em;
    margin-top: 12em;
}    

#canvasman{
    display: none;
    width: 100%;
    height: auto;
}

.texto1{
    font-size: 20px;
    width: 15em;
    overflow:hidden;
    
    color: #11998e;
    /*color: #128076;*/
    /*color: #034943;*/
    /*color: #319141;*/
    
    
}
 .psize1{
    font-size: 30px;
}
.psize2{
    font-size: 30px;
}
.collum1{
    display: flex;
}

footer{
    display: flex;
    margin-top: 20em;
    height: 8em;
    background: rgba(75, 85, 81, 0.288);
    gap: 5em;
    border-radius: 4px;
}

#logo2{
    background-image: url('oliveira-stack.png.png');
    background-size: cover;
    width: 8em;
    height: 8em;
    margin-left: 1em;
    
}

.icons{
    width: 2em;
    height: 2em;
    margin-top: 4em;
    margin-left: 10em;
}

}


@media (min-width: 320px) and (max-width: 767px){
    body {
        margin: 0;
        min-height: 100vh;
        position: relative;
        z-index: 1;
        font-family: "Quicksand", sans-serif;
      }
    body::before {
        content: ''; /* Essencial para que pseudo-elementos funcionem */
        position: fixed; /* Fixa o overlay na viewport */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('mulhercachoeiramobile.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0.6; /* Ajuste este valor entre 0 (totalmente transparente) e 1 (totalmente opaco) */
        z-index: -1; /* Coloca o overlay atrás do conteúdo do body */
    }
    .container-principal {
        /*max-width: 767px;*//* ou 1200px, 1440px, 1600px, etc. */
        width: 100%;
        margin: 0 auto;
        /*padding: ;*/
        
      }

      .cabecalho{
        margin: 0;
        background: rgb(228, 244, 252);
        width: 100%;
        height: 8em;
        box-shadow: 2px 5px 5px #88c0acd2 ;
        /*box-shadow: 2px 5px 5px  rgb(228, 244, 252);*/
        border-radius: 4px;
        
    }
    #logo{
        background-image: url('oliveira-baixoOliveira-stack.png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 8em;
        height: 8em;
        margin-left: -1em;
    }

    .botoescabeçalho{
        text-decoration: none;
        margin-top: -3.3em;
        margin-left:  7em;
    }
    @media (min-width: 375px) and (max-width: 767px){

        .botoescabeçalho{
            display: flex;
            text-decoration: none;
            margin-top: -1.6em;
            margin-left:  9em;
        }
    }

    @media (min-width: 503px) and (max-width: 767px){

        .botoescabeçalho{
            display: flex;
            text-decoration: none;
            margin-top: -1.8em;
            margin-left:  13em;
        }
    }
    .textobotoescabeçalho{
        font-size: 15px;
        width: 13em;
        overflow:hidden;
        margin-left: 0.5em;
        color: #11998e;
       
    }

    #botaoentreemcontato{
        display: none;
    }


    
     /*#entreemcontato {
        font-size: 15px;
        cursor: pointer;
        width: 11em;
        height: 3em;
        color: white;
        border: none;
        border-radius: 4em;
        border: 0.1px solid #555;
        text-shadow:
          -1px -1px 0 #000,
           1px -1px 0 #000,
          -1px 1px 0 #000,
           1px 1px 0 #000;
           background: radial-gradient(circle at center, #ffca8a 0%, #fda32dec 100%);
           box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.747);
    
        margin-left: 4em;
        margin-top: 8em;
        
      }
     @media (min-width: 320px) and (max-width: 375px){
        #entreemcontato {
            font-size: 15px;
            cursor: pointer;
            width: 11em;
            height: 3em;
            color: white;
            border: none;
            border-radius: 4em;
            border: 0.1px solid #555;
            text-shadow:
              -1px -1px 0 #000,
               1px -1px 0 #000,
              -1px 1px 0 #000,
               1px 1px 0 #000;
               background: radial-gradient(circle at center, #ffca8a 0%, #fda32dec 100%);
               box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.747);
        
            margin-left: 6em;
            margin-top: 8em;
            
          }
        }

        @media (min-width: 376px) and (max-width: 504px){
            #entreemcontato {
                font-size: 15px;
                cursor: pointer;
                width: 11em;
                height: 3em;
                color: white;
                border: none;
                border-radius: 4em;
                border: 0.1px solid #555;
                text-shadow:
                  -1px -1px 0 #000,
                   1px -1px 0 #000,
                  -1px 1px 0 #000,
                   1px 1px 0 #000;
                   background: radial-gradient(circle at center, #ffca8a 0%, #fda32dec 100%);
                   box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.747);
            
                margin-left: 8em;
                margin-top: 8em;
                
              }
            }*/
            /*#cachu{
                background-image: url('canvacachoeiramobile.png');
                background-size: cover;
                background-repeat: no-repeat;
                height: 190vh;
                width: 100%;
            }*/
            #cachu{
            
                height: auto;
                width: 100%;
            }
        
            #text1{
                display: none;
                /*margin-left: 2em;
                margin-top: 2em;*/
              }
              
            
        
              @media (min-width: 376px) and (max-width: 504px){
                #text1{
                    margin-left: 4.5em;
                    margin-top: 2em;
                    /*background: #88c0ac4d;*/
                  }
              }
        
       


    #familia{
        background-image: url('familiafelizMobile2.png');
        width: 100%;
        min-height: 30em;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        border-radius: 4px;
        
    }
    @media (min-width: 376px) and (max-width: 504px){
        #familia{
            background-image: url('familiafelizMobile2.png');
            width: 100%;
            min-height: 40em;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            display: flex;
            border-radius: 4px;
            
        }
    }
    @media (min-width: 505px) and (max-width: 767px){
        #familia{
            background-image: url('familiafelizMobile2.png');
            width: 100%;
            min-height: 40em;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            display: flex;
            border-radius: 4px;
            
        }
    }


    #texto2{
        color: orange;
        margin-left: 2em;
        margin-top: 1em;
    }

    

    #moça{
        background-image: url('moçafelizmobile.png');
        width: 100%;
        height: 35em;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        border-radius: 4px;
        margin-top: 10em;
    }

    #texto4{
        /*color: #11998e;*/
        color: rgb(255, 115, 0);
        /*margin-left: 1em;*/
        margin-top: 10em;
        font-size: 20px;
        background: #88c0ac4d;
        height: 9em;
        width: 28em;
        padding-left: 0.5em;
        border-radius: 1em;
    }

    .collum1{
        display: flex;
        flex-direction: column;
    }
    .texto1{
        font-size: 20px;
        width: 13em;
        overflow:hidden;
        margin-left: 0.5em;
        color: #11998e;
       
    }
   

    .psize1{
        font-size: 25px;
    }

    .psize2{
        font-size: 20px;
    }

    .container1{
        display: none;
        /*width: 100%;
        height: auto;
        background: rgba(181, 234, 215, 0.288);
        min-height: 72vh;
        border-radius: 4px;
        display: flex;
        flex-direction: column;*/
        
    }

    .container111{
        width: 100%;
        height: auto;
        background: rgba(181, 234, 215, 0.288);
        min-height: 72vh;
        border-radius: 4px;
        display: flex;
        flex-direction: column; 
        /*para caso precise usar em vez de container 1, mas faz a mesma funçao de container1*/
        
    }

    .container2{
        display: none;
        width: 100%;
        height: auto;
        background: rgba(181, 234, 215, 0.288);
        min-height: 92vh;
        border-radius: 4px;
    }

    .container222{
        width: 100%;
        height: auto;
        background: rgba(181, 234, 215, 0.288);
        min-height: 92vh;
        border-radius: 4px;
    }

    

    /*#cachoeira{
        background-image: url('cachoeirafinal.png');
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 13em;
        float: right;
        margin-right: 10em;
        border-radius: 10px;
        margin-top: 4em;
    }*/

    /*.containercachu{
        width: 100%;
        height: auto;
        background: rgba(181, 234, 215, 0.288);
        min-height: 72vh;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        background-image: url('cachoeirafade.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        
    }*/
    
    /*.containermenina{
        width: 100%;
        height: auto;
        background: rgba(181, 234, 215, 0.288);
        min-height: 72vh;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        background-image: url('meninaA.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }*/
    #resultados{
        display: none;
        background-image: url('meninaA.png');
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 10em;
        float: right;
        border-radius: 4px;
        margin-top: 2em;
    
    }
    #texto3{
        display: none;
        color: #11998e;
        /*color: rgb(255, 115, 0);*/
        font-size: 20px;
        width: 12em;
        margin-left: 1.5em;
    }

    #result{
        width: 100%;
        height: auto;
    }
    
    
    #man{
        display: none;
        background-image: url('mancruzado.png');
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 14em;    
        border-radius: 4px;
        margin-top: 2em;
    }

    #canvasman{
        width: 100%;
        height: auto;
    }

    .psize1{
        font-size: 30px;
    }

    footer{
        display: flex;
       
        margin-top: 20em;
       
        height: auto;
        background: rgba(75, 85, 81, 0.288);
        gap: 1em;
        border-radius: 4px;
    }
    
    #logo2{
        background-image: url('oliveira-stack.png.png');
        background-size: cover;
        width: 8em;
        height: 6em;
        margin-top: -2em;
        
    }
    
    .icons{
        width: 2em;
        height: 2em;
        margin-top: 2em;
        gap: 3em;
    }

   
}

@media (min-width: 768px) and (max-width: 1024px){
    body::before {
        content: ''; /* Essencial para que pseudo-elementos funcionem */
        position: fixed; /* Fixa o overlay na viewport */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('cachoeirafinal.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        opacity: 0.6; /* Ajuste este valor entre 0 (totalmente transparente) e 1 (totalmente opaco) */
        z-index: -1; /* Coloca o overlay atrás do conteúdo do body */
    }
    
    .container-principal {
        max-width: 1440px; /* ou 1200px, 1440px, 1600px, etc. */
        margin: 0 auto;
        padding: 0 20px; 
        
      }
    
    .cabecalho{
       
        background: rgb(228, 244, 252);
        height: 8em;
        box-shadow: 2px 5px 5px #88c0acd2 ;
        /*box-shadow: 2px 5px 5px  rgb(228, 244, 252);*/
        border-bottom-left-radius: 2em;
        border-bottom-right-radius: 4em;
        display: flex;
        
    }
    #logo{
        background-image: url('oliveira-stack.png.png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 10em;
        height: 8em;
        margin-top: -1em;
        margin-left: 1em;
        
    }

    .botoescabeçalho{
        text-decoration: none;
        margin-top: 2.2em;
        margin-left: 4em;
    
    }

    .textobotoescabeçalho{
        font-size: 20px;
        margin-left: 0.5em;
        color: #11998e;
       
    }
    
    .container1{
        width: 100%;
        height: auto;
        background: rgba(181, 234, 215, 0.288);
        min-height: 92vh;
        border-radius: 4px;
        
       
    }
    @media (min-width: 768px) and (max-width: 1024px){
        .container1{
            width: 100%;
            height: auto;
            background: rgba(181, 234, 215, 0.288);
            min-height: 120vh;
            border-radius: 4px;
            
           
        }
    }
    
    .container2{
       
        height: 10em;
        background: rgba(181, 234, 215, 0.288);
        min-height: 92vh;
        border-radius: 4px;
    }

    @media (min-width: 768px) and (max-width: 1024px){
        .container2{
       
            height: 10em;
            background: rgba(181, 234, 215, 0.288);
            min-height: 140vh;
            border-radius: 4px;
        }
    }
    
    
    #cachoeira{
        background-image: url('cachoeiramulherMobileFinal.png');
        background-repeat: no-repeat;
        background-size: cover;
        width: 15em;
        height: 27em;
        float: right;
        margin-right: 2em;
        border-radius: 10px;
        margin-top: -26em;
    }
    
    #entreemcontato {
        font-size: 15px;
        cursor: pointer;
        width: 11em;
        height: 3em;
        color: white;
        border: none;
        border-radius: 4em;
        border: 0.1px solid #555;
        text-shadow:
          -1px -1px 0 #000,
           1px -1px 0 #000,
          -1px 1px 0 #000,
           1px 1px 0 #000;
           background: radial-gradient(circle at center, #ffca8a 0%, #fda32dec 100%);
           box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.747);
    
        margin-left: 10em;
        margin-top: 2em;
        
      }
      #entreemcontato:hover{
        transition: 2s;
        transform: scale(1.05);
      }
    
      #text1{
        margin-left: 5em;
        margin-top: 2em;
      }
    
    #familia{
        background-image: url('felizfamiliaUltimo.png');
        width: 100%;
        height: 35em;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        border-radius: 4px;
    }
    @media (min-width: 768px) and (max-width: 952px){
        #familia{
            background-image: url('familia3.png');
            width: 100%;
            height: 45em;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            border-radius: 4px;
        }
    }
    #texto2{
        color: orange;
        margin-left: 5em;
        margin-top: 3em;
    }
    
    #resultados{
        background-image: url('meninamobile.png');
        background-repeat: no-repeat;
        background-size: cover;
        width: 15em;
        height: 27em;
        float: right;
        margin-right: 2em;
        border-radius: 10px;
        margin-top: -27em;
    
    }
    
    #texto3{
        margin-left: 5em;
    }
    
    #moça{
        background-image: url('moçafeliz.png');
        width: 100%;
        height: 35em;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        border-radius: 4px;
        
    }
    
    
    #texto4{
        /*color: #11998e;*/
        color: rgb(255, 115, 0);
        margin-left: 9em;
        margin-top: 9em;
        font-size: 20px;
        background: #88c0ac4d;
        height: 9em;
        width: 28em;
        padding-left: 3em;
        border-radius: 1em;
    }
    @media (min-width: 768px) and (max-width: 952px){
        #texto4{
            /*color: #11998e;*/
            color: rgb(255, 115, 0);
            margin-left: 2.5em;
            margin-top: 9em;
            font-size: 20px;
            background: #88c0ac4d;
            height: 9em;
            width: 28em;
            padding-left: 3em;
            border-radius: 1em;
        }
    }
    
    #man{
        background-image: url('man3.png');
        background-repeat: no-repeat;
        background-size: cover;
        width: 15em;
        height: 27em;
        float: right;
        margin-right: 10em;
        border-radius: 10px;
        margin-top: -21.5em;
    }
    @media (min-width: 768px) and (max-width: 1024px){
        #man{
            background-image: url('man3.png');
            background-repeat: no-repeat;
            background-size: cover;
            width: 15em;
            height: 27em;
            float: right;
            margin-right: 5em;
            border-radius: 10px;
            margin-top: -21.5em;
        }
    }
    #texto5{
        color: #11998e;
        /*color: rgb(255, 115, 0);*/
        margin-left: 5em;
        margin-top: 12em;
    }    
        
    
    .texto1{
        font-size: 20px;
        width: 15em;
        overflow:hidden;
        
        color: #11998e;
        /*color: #128076;*/
        /*color: #034943;*/
        /*color: #319141;*/
        
        
    }
     .psize1{
        font-size: 30px;
    }
    .psize2{
        font-size: 30px;
    }
    .collum1{
        display: flex;
        flex-direction: column;
    }
    

    
    @media (min-width: 768px) and (max-width: 1024px){
        footer{
            display: flex;
            margin-top: 20em;
            height: 8em;
            background: rgba(75, 85, 81, 0.288);
            gap: 0.5em;
            border-radius: 4px;
        }
        
        #logo2{
            background-image: url('oliveira-stack.png.png');
            background-size: cover;
            width: 8em;
            height: 8em;
            margin-left: 1em;
            
        }
        
        .icons{
            width: 2em;
            height: 2em;
            margin-top: 4em;
            margin-left: 8em;
        }
    }

}