@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');

*,
*::after,c
*::before{
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

html,body,main{
    width: 100vw;
    overflow-x: hidden;
    font-family: 'Noto Sans Lao',Arial, Helvetica, sans-serif;
}

:root{
    --degrade: linear-gradient(to right, #df7e7a 0%,#B76A66 33%,#B96B67 66%,#8F5553 100%);
    --borda-degrade:#B76A66;
    --fonte-clara: #ffffff;
    --font-texto: #000000;
    --cabeca-rodape: #28211e;
    --visivel: none;
    

}

/*
    HEADER START
*/

.headercontainer{
    background-color: var(--cabeca-rodape);
    display: flex;
    flex-flow: row wrap;
    padding: 10px 10px;
    text-align: center;
    align-items: center;
    justify-content: space-between;

}


#headermob{display:block; height:84px}



#headermenu{ 
    border: 1px solid white;
    border-radius: 50%;
    padding: 2px;
    background-color: #000000c2;
    margin-top: 10px;
    align-items: center;
    justify-items: center;
    align-content: center;
    cursor: pointer;
}

#buttonlogins{ 
    margin: 20px;
    width: 270px;
    font-size: clamp(0.85em,1vw,1.5em);
    
    
}


header li{list-style: none;}
header nav a{ 
    display: var(--visivel);
    /*border: 1px solid white;*/
    border-radius: 10p;
    font-size: clamp(0.85em,1vw,1.5em);
    color: #ffffff;
    text-decoration: none;
    background-color: #00000050;
    width: 310px;
    
}

header nav a:hover{
    background-color: #ffffff10;
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.headerfullbutton{
    text-decoration: none;
    background-image: var(--degrade);
    color: var(--fonte-clara);
    height: 2px;
    padding: 5px;
    margin: 5px;
    font-size: 20px;
    border-radius: 16px;
    border: solid 1px #B76A66;
    text-shadow: 2px 2px  #00000050;
}

#headerbuttonentrar{ 
    background-image: none;
    border-radius: 5px;

}

@media screen and (max-width: 600px){   
    #headerdesktop{display: var(--visivel);}
    #headermenuul{display: var(--visivel);}
    #buttonlogins{display: var(--visivel);}
    #headermob{
     width: 250px;
     height:84px}

}

@media screen and (min-width: 600px) and (max-width: 999px){ 
    #headernav{
        order:2;
    }
}



@media screen and (min-width: 1000px){   
    #headermob{width: 350px;}
    #headermenu{display: none;}
    .headercontainer{
        flex-wrap: nowrap;
        justify-content: space-between; 
    }
    header ul{display:flex;
        flex-flow: row wrap;
        width: calc(100vw - 700px);
        justify-content: center;
           
    }
    header nav a{
        display: inline;
        background-color: var(--cabeca-rodape);
        width: 100vw;
        margin-inline: clamp(0.85em,1vw,1.5em);
    }
}



/*
    HEADER END
*/


/*
    INDEX START
*/

/* Grade */

#container{
    display: grid;
    grid-template: 100px 1fr 1fr 4fr / 1fr 1fr;
    background-color: #F8F8FF;
    gap: 20px 50px;
    min-height: 600px;
    height: 100vh;
    max-height: 900px;
    padding: 40px;
    place-content: center center;
    place-items: center center;
    text-align: center;

}
.grid0{ grid-area: 1 / 1 / span 1/ span 1 ;}
.grid1{ grid-area: 2 / 1 / span 1/ span 1 ;}
.grid2{ grid-area: 3 / 1 / span 1/ span 1 ;}
.grid3{ grid-area: 4 / 1 / span 1/ span 1 ;}
.grid4{ 
    grid-area: 1/2/-1/-1;
    align-self: center;
}


/* imagem da grade*/


#container h1, #container strong{font-family: 'Lilita One'}
#container h1 {
    font-size: clamp(0.85em,8vw, 3em);
    color: #656565;
    text-align: center;
    strong { 
        font-weight: 400;
        color: var(--borda-degrade);
    }
    
}



#container p { 
    font-size:clamp(1em,1vw,1.5em);
    text-align: justify;
    padding: 0 1em 1em 1em;
    text-indent: 2em;
    
            


}

.buttonmain{
    font-size: clamp(1em,1.5vw,1.5em);
    padding: 1em 1em;
    margin-top: 10px;
    border-radius: 50px;
    border: none;
    cursor: pointer;

    }
.fullbutton:active,.buttonmain:active{
    transform: translateY(3px);
    box-shadow: 1px 3px 3px 2px rgba(0,0,0,0.25);
    }

.fullbutton:hover,.buttonmain:hover{
    text-decoration: underline;}
        
    
.buttonmain1{color: white; background-image: var(--degrade);}
.buttonmain2{color: var(--bordadegrade)}

#lotusid{

    margin-top: 50px;
    position: relative;
    top:0%;
    width: 35vw;
    min-width: 300px;
    max-width: 500px;
    aspect-ratio: 5/2;
    filter: drop-shadow(20px 25px 10px rgba(0, 0, 0, 0.25));


    #lotus1{
        width: 50%;
        height: 104%;
        top:0%;
        left: 0%;
        border-radius: 0px 400px;
    }

    #lotus2{
        top:-12%;
        left: 18%;
        transform: rotate(-70deg);
    }  
    #lotus3{
        top:-18%;
        left: 30%;
        transform: rotate(-45deg);
    }    
    #lotus4{
        top:-10%;
        left: 42%;
        transform: rotate(-20deg);

    }  
    #lotus5{
        width: 50%;
        height: 104%;
        top:0%;
        left: 50%;
        border-radius: 400px 0px;

    }


    .lotus{
        width: 41.57%;
        height: 100%;
        box-sizing: border-box;
        position: absolute;
        border-radius: 100000px 0px;
        background: rgba(226, 204, 197, 0.67);
        border: #000000 solid 1px;
    }

}

.img1{
    background-image: url(./img/img1_700.jpg);
    aspect-ratio: 16/12;
    min-width: 350px;
    width: 50vw;
    max-width: 800px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: #ffffff solid 3px;
    border-radius: 50px;
    box-shadow: 25px 25px 250px 75px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px){
    em{display: block;}
    #container{
        grid-template: auto auto auto auto 250px / 1fr;
        grid-auto-rows: 100px;
        grid-auto-columns: 100px;
        background-color: #F8F8FF;
        gap: 20px;
        margin: 0px;
        padding: 20px;        
        height: auto;
        place-content: center center;
        place-items: center center;
        
    }

    #lotusid{width: 90vw;}

    .grid0{ grid-area: 1 / 1 / span 1/ span 1 ;}
    .grid1{ grid-area: 2 / 1 / span 1/ span 1 ;}
    .grid2{ grid-area: 4 / 1 / span 1/ span 1 ;}
    .grid3{ grid-area: 5 / 1 / span 1/ span 1 ;} 
    .grid4{ grid-area: 3 / 1 / span 1 / 2}  

}


@media screen and (min-width: 600px) and (max-width: 900px){

    #container{
        grid-template: 100px 1fr 1fr auto / 1fr 1fr;
    }
    .img1{
        aspect-ratio: 16/12;
    }
    .grid0{ grid-area: 1 / 1 / span 1/ span 2 ;}
    .grid1{ grid-area: 2 / 1 / span 1/ span 1 ;}
    .grid2{ grid-area: 3 / 1 / span 1/ span 1 ;}
    .grid3{ grid-area: 4 / 1 / span 1/ span 2 ;align-self: flex-start;}
    .grid4{ 
        grid-area: 2/2/-1/-2;
        align-self: flex-start;
    }

}

@media screen and (min-width: 600px) and (max-width: 768px){
    #container{
        grid-template: 100px 300px 1fr auto / 1fr 1fr;
    }
    .grid0{ grid-area: 1 / 1 / span 1/ span 2 ;}
    .grid2{ grid-area: 3 / 1 / span 1/ span 2 ;}
    .grid4{ 
        grid-area: 2/2/3/3;
        align-self: center;
    }



}

@media screen and (min-width: 768px) and (max-width: 1200px){

    .grid0{ grid-area: 1 / 1 / span 1/ span 2 ;}
    .grid4{ 
        grid-area: 2/2/-1/-2;
        align-self: flex-start;
    }

}
  


/*
    INDEX END
*/




/* SUA PELE START */

    
#suapele{
    background-image: url("./img/facescan.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: grid;
    
}

#suapele section h1{
    position: absolute;
    top: 40%;
    left:60%
}



#suapele #button{
    background-image: var(--degrade);
    color: var(--fonte-clara);
    background-image: var(--degrade);
    color: var(--fonte-clara);
    height: 40px;
    padding: 5px;
    margin: 5px;
    font-size: 20px;
    border-radius: 16px;
    border: solid 1px #B76A66;
    text-shadow: 2px 2px  #00000050;
    top: 57%;


}


#suapele input[type]{
    background-image: var(--degrade);
    color: var(--fonte-clara);
    background-image: var(--degrade);
    color: var(--fonte-clara);
    height: 60px;
    padding: 100x;
    margin: 5px;
    font-size: 20px;
    border-radius: 16px;
    border: solid 1px #B76A66;
    text-shadow: 2px 2px  #00000050;
    text-align: center;
    position: absolute;
    top:50%;
    left: 50%;

}

/* SUA PELE END */





/*
    FOOTER START
*/




a:hover{text-decoration: underline;}

.rodapeupper a{display: block;}

   



span{font-size: clamp(0.85em,1vw,1.5em);}





#redesociais{
    font-weight: bolder;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 3px solid white;
}

footer a { margin: 5px;}

footer h1{ font-size: clamp(1em, 10vw, 2em);}


#footercontainer{
    display: grid;
    grid-template: repeat(2,1fr) / repeat(3,1fr);
    background-color: #28211e;    
    height: 100vh;
    max-height: 500px;
    place-content: center center;
    place-items: center center;

}

.setor1{background-image: linear-gradient(to bottom, #E5BDAD, #c87d60d7);
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 10px;

}
.setor1 a {display: block; text-decoration: none;color:black}
.setor2 *{color:white; text-align: center;}


#footermob{
    display:block;
    min-width: 32px;
    width: 30vw;
    max-width: 350px;

}
.social{ margin-inline: 40px;}


@media screen and (max-width:700px) {
    #footercontainer{
     grid-template: repeat(6,1fr) / repeat(1,1fr);
     min-height:1000px;
     height: 150vh;
     max-height: 150vh;
    }

    .case{padding: 20px 10px;}

    #footermob{ width: 300px;}

    .setor1{background-image: linear-gradient(to right, #E5BDAD, #c87d60d7);
    }

    .cel4{
        grid-area: -3/1/-2/-1;
    }

    .cel5{
        grid-area: -2/1/-1/-1;
    }
}

/*
    FOOTER START
*/