@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');



* {



    margin: 0;

    padding: 0 ; 

    /* box-sizing: 0; /**/



    font-family: 'Inter', sans-serif;  /**/



    font-size: 16px;



}



.background-video {
    background-color: #000;
    
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
  }
  
  .video-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;      
  }  


  .video-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  

    height: clamp(120vh, 67vw, 67vw);   
    width: clamp(120vw, 177vh, 213vh);

    /*width: 1920px; /**/
    min-height: 120vh;
    min-width: 120vw;
   

    filter:brightness(75%) contrast(120%); /**/

  }  




html, body {

    width: 100vw;

    background: #fcfcfc;

}







a  {

    text-decoration: none;

    width:auto;

}





header {



    position: fixed;



    top: 0;

    left: 0;

    z-index: 1000;

    width: 100vw;



    height: 100px;



    transition: all 0.5s ease;

    background-color:  rgba(0,0,0,0.2) ; /* transparent; /**/

    

    display: flex; align-items: center; justify-content: center; 

       



}







header.fixed {



    /* transition: height 0.5s ease; /**/



    background-color: #000; 



    height: 80px;



}











.header-container {



    width: clamp(312px, 100vw, 1120px); /**/

    height:100%;

    

    display: flex;

    justify-content:  space-between; /* */

    align-items: center; /* */

    /* background-color: #00D071; /**/



}







.header-text {



    padding-left: 10px;

    height:80px;



}  







.header-menu {



    padding-right: 10px;

    padding-left: 10px;



    font-size: 1.2rem;

    color: #fff;



    height: auto;

    width: auto;



}







.header-menu ul {



    list-style-type: none;

    display: flex; justify-content: flex-end; align-content: center;

    gap: 30px 30px;

    padding: 10px;



}







.header-menu a {



    color:#fff;



}







.header-menu a:hover {



    color:#ff8447;



}







main {



    width : 100%;



    height : auto;     



}





.divForm {

    background-color: #F3F3F3; 

    width: clamp(320px, 96%, 1120px);

    border-radius: 6px; 

    margin-bottom: 0px;

    height:auto;

    display: flex;

    flex-direction: column;

    align-items: center;



    border: 1px solid  rgb(212, 212, 212); /**/ 

    /* box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 6px;  /**/

    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; /**/



}



.divMargimForm {

    width: 92%;

    margin-top: 42px;

    margin-bottom: 42px;

    display: flex;

    flex-direction: column;

    align-items: center; /**/

    /*background-color: #51be26; /**/

}



.divFormProduto {

    width:100%;

    /*background-color: #aaaaaa; /**/

    display: flex;

    flex-direction: column;

    

}





footer {



    width: 100%;



    height: auto;

    padding-top: 20px;

    padding-bottom: 20px;





    background-color: #333;



    color: #fff;



    text-align: center;



    display: flex;

    justify-content: center;

    align-items: center;



}















.background-image {





    background-image: linear-gradient(rgba(20,0,0,0.3), rgba(0,0,0,0.6)), url('../imgs/21B.jpg'); /* */ 



    /* background-image: linear-gradient(rgba(69, 51, 8, 0.3), rgba(0,0,0,0.6)), url('../imgs/21B.jpg'); /* */ 



    width: 100%;



    // height: max(100vh, 745px);
   height: max(72vh, 680px);


    background-size: cover;



    background-position: center;



    background-repeat: no-repeat;  



    position: relative;



    display: flex; flex-direction: column; align-items: center; justify-content: center; 



    



}    







.banner {

    background-color: rgb(10, 10, 10, 0.7);

    width:100%;

    padding-top: 1.5rem;

    padding-bottom: 1.5rem;

}

.banner2 {

    position: relative;

    background-color: rgb(0, 0, 0, 0.5);

    width:100%;

    padding-top: 1.5rem;

    padding-bottom: 1.7rem;

    
}



.container {



    width: min(100%, 1120px);

    height:auto;

    margin: 0 auto;



}





.marginLeft {margin-left: 1rem;}

.marginRight {margin-right: 1rem;}

.marginBotton {margin-bottom: 1rem;}

.marginBotton2 {margin-bottom: 2rem;}

.marginBotton4 {margin-bottom: 4rem;}



.flexRowCenter {



    display: flex;

    align-items: center;  /* */

    justify-content: center;  /* */



}



.flexRowLeft {



    display: flex;

    align-items: start;  /* */

    justify-content: left;  /* */



}



.flexColCenter {



    display: flex;

    flex-direction: column;

    align-items: center;  /* */

    justify-content: center;  /* */



}



.flexColLeft {



    display: flex;

    flex-direction: column;

    align-items:start;  /* */

    justify-content:center;  /* */



}





.boxContainer {



    width: min(100%, 1120px);



    height:auto;

    margin: 0 auto;



    background-color: #fcfcfc;



    display: grid; 

    grid-template-columns: 1fr 1fr 1fr 1fr;

    grid-template-rows: 1fr 1fr  ;

    

    gap: 10px 20px ; /**/



    margin-top: 4rem;

    margin-bottom: 4rem;



}



.boxFooter {



    width: min(100%, 1120px);

    height:auto;

    margin: 0 auto;



    display: grid; 

    grid-template-columns: 2fr 1fr 1fr 1fr;

    grid-template-rows: 1fr;



    gap: 10px 20px; 



}







.aparecerMeio {opacity: 0.5;}



.escalaMeio {scale: 50%;}



.escalaMini {scale: 80%;}



.correrRightMeio {transform: translateX(+50%);}



.correrMeio {transform: translateX(-50%);}



.aparecer {opacity: 0;}



.escala {scale: 0;}



.correrRight {transform: translateX(+100%);}



.correr {transform: translateX(-100%);}



.allEffects {

    opacity: 0;

    scale: 0;

    transform: translateX(-100%); /**/

}







.effect {



    transition: all 0.7s;

    

    /* transition:all 1s; /**/

    /*scale:70%;

    /*opacity: 0;

    transform: translateX(-100%); /**/



}



.show {

    opacity:1;

    scale:100%;

    transform: translateX(0); /**/

}





.box1{

   

    margin-top: 2rem;

    margin-bottom: 3rem;



    width: min(90%, 400px);



    height:auto;

    border-radius: 5px;



    line-height: 1.5em;

   



}







.container-text1{



    color: #222222; /* */

    font-size: 1rem;

    font-weight:normal ;

    text-align: left; 



}







.container-text1 div{ 

    

    font-size: 1.1rem;

    font-weight:bold ;

    text-align: left; 

    margin-bottom: 0.2rem;



}















.button {



    font-size: 1rem;

    font-weight: bold;

    background-color: #ff5448;



    /* width: clamp(80px, 30vw, 230px); /**/

    width: 100%;

    height: auto;

    

    padding-top: 16px;

    padding-bottom: 16px;

    



    border-radius: 5px;

    text-align: center;



    color: #fff; /* Adicionei uma cor de texto para melhor visibilidade */



    transition: background-color 0.3s; /* Adicionando transição de cor de fundo */



}







.button:hover {



    background-color: #a65128; /* Nova cor de fundo no hover */



}







.button2 {





    font-size: 1.2rem;

    font-weight: bold;

    background-color: #d8ce41;

   



    height: auto;

    width: 100%;  /* clamp(80px, 30vw, 230px); /**/

    

    padding-top: 16px;

    padding-bottom: 16px;

    

    border-radius: 5px;

    text-align: center;



    color: #000000; /* Adicionei uma cor de texto para melhor visibilidade */

    transition: background-color 0.3s ease; /* Adicionando transição de cor de fundo */





}







.button2:hover {



    background-color: #dad7d7; /* Nova cor de fundo no hover */



}







.button3 {



    



    font-size: 1rem;



    font-weight: bold;



    background-color: #1044f0;



    



    height: auto;



    



    padding-left: 1rem;



    padding-right: 1rem;







    width: 100%;



    border-radius: 5px;



    text-align: center;



    line-height: 42px; /* Igual à altura para centralizar verticalmente */



    color: #f5f3f3; /* Adicionei uma cor de texto para melhor visibilidade */



    transition: background-color 0.3s ease; /* Adicionando transição de cor de fundo */



    



    /*opacity: 0;



    transition: opacity 0.7s ease; 







    /*opacity: 0;*/



    /*transition: opacity 0.5s ease; /* Adicionando uma transição de 0.5s com a função ease */







}







.button3:hover {



    background-color: #243ba0; /* Nova cor de fundo no hover */



}



   



.button3visible {



    opacity: 1;



    transition: opacity 0.7s ease; /* Adicionando uma transição de 0.5s com a função ease */



}







.mobile-menu {



    /* position:absolute; /**/



    display:none;



    flex-direction: column;



    justify-content: center;



    width:100vw;



    padding-bottom: 1.2rem;



    background-color: rgb(14, 14, 34, 0.9);



    top:110;



    left:0;



}







.mobile-menu-icon {



    display: none;



    margin-right: 1.5rem;



}







.svgIcon{



    color: rgb(221, 221, 221);



    width:2rem;



    



}











.open {



    display:flex;



}







.nav-item {



    margin: 0 15px;



}







.nav-link {



    text-decoration: none;



    font-size: 1.15rem;



    color: #fff;



    font-weight: 400;



}







.logo{



    padding-left: 10px; 



    height:100%;

    width:auto;



    display: flex; 

    align-items: center;

    justify-content: space-between;



}



.left0Top0{

    display:flex;

    flex-direction: column;    

    justify-content: left;

    align-items: start;



}



.imgLogo {

    width:auto;

    transition: scale 0.5s ease;

    scale:100%;

}



.imgLogoMini {

    

    margin-left: -30%;

    

    width: auto;

    transition: scale 0.5s ease;

    scale:70%;





}







.imgLogoScrool {



    /* transition: scale 0.5s ease; /**/



    scale:75%;



}







.imgLogoMenu {

    transition: scale 0.5s ease;
    scale:60%;

}


.text1 {

    padding-top: 2px;
    padding-bottom: 2px;
    height: auto;   

}

.texto01 {

    font-weight: 400;
    font-style: normal;
    font-size:3.5rem;
    color:#e7e5e3;
    text-shadow: 3px 3px 12px #000  ; 
    text-align: center;
}


.texto02 {
    font-size:2.0rem;
    color:#e7e5e3; 
    text-align: center;
}


.texto03 {
    font-size:1.4rem;
    color: #72adfa;
    text-align: center;
}


.texto04 {
    font-size:1.5rem;
    color:#e7e5e3; 
    text-align: center;
}


.texto05 {
    font-size:1rem;
    color:#c1c1c1; 
    text-align: center;
}


.shadow {
    text-shadow: 0.2rem 0.2rem 0.3rem #000000  ; 
}

.boxBanner {
    width: 80%;
    max-width: 890px;
    border-radius: 40px;    
}

.boxShadow {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.font12{font-size: 0.6rem;} 
.font14{font-size: 0.8rem;} 
.font16{font-size: 1rem;} 
.font18{font-size: 1.2rem;} 
.font20{font-size: 1.3rem;} 
.font22{font-size: 1.4rem;} 
.font24{font-size: 1.5rem;} 
.font26{font-size: 1.6rem;} 
.font28{font-size: 1.8rem;} 
.font30{font-size: 1.9rem;} 
.font32{font-size: 2rem;} 
.font34{font-size: 2.2rem;} 
.font36{font-size: 2.4rem;} 
.font40{font-size: 2.5rem;} 
.font42{font-size: 2.6rem;} 
.font48{font-size: 3rem;} 
.font54{font-size: 3.5rem;} 
.font64{font-size: 4rem;} 



.fontBold{font-weight: bold;} 



.lineHeight{line-height: 1.5em;} 





.preto{color:#000;} 

.branco{color:#fff} 

.brancoFraco{color:#a5a5a5;} 
.brancoGelo{color:rgb(240,240,240);} 

.cinza{color:#5e5e5e;} 

.laranja{color:#ff5440;} 

.azul{color:#006EFF;} 

.verde{color:#00D071;} 



.backPreto{background-color:#000;} 


.backBranco{background-color: #fff;} 

.backAmareloForte{background-color: #ffdf8d;} 

.backAmareloFraco{background-color: #FFF9EB;} 



.backBrancoFraco{background-color:rgb(232, 232, 232) } 

.radius5 {border-radius: 5px;;}
.radius10 {border-radius: 10px;;}
.radius15 {border-radius: 15px;;}


.w30{width:30%;} 
.w40{width:40%;} 
.w50{width:50%;} 
.w60{width:50%;}
.w70{width:70%;}
.w80{width:80%;}
.w90{width:90%;}
.w100{width:100%;} 

.padding20 { padding: 20px;}

.paddingH20 { padding-top: 20px; padding-bottom: 20px;}
.paddingW20 { padding-left: 20px; padding-right: 20px;}

.paddingH40 { padding-top: 40px; padding-bottom: 40px;}
.paddingW40 { padding-left: 40px; padding-right: 40px;}


.h100{height:100%;} 

.textRight{text-align:right;} 
.textLeft{text-align:left;} 
.textCenter{text-align: center;} 



.tsDelay1 {transition-delay: 0.1s;}

.tsDelay2 {transition-delay: 0.2s;}

.tsDelay4 {transition-delay: 0.4s;}



.montSerrat {font-family: "Montserrat", Sans-serif;}





.metade {

    padding: 1.5rem;

    width:50%;    

}



.cardContainer {



    display:flex;

    justify-content:space-between;

    align-items: center;

    /* gap: 20px; /**/



}



.card {

    

    display:flex;
    justify-content:center;
    align-items: center;


    width: 30%;
    height: 28rem;
    border-radius: 12px;

    background-color:#fff;

    border: 1px solid  rgb(212, 212, 212); /**/ 
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; /**/

    

}



.intoCard{

    width: 80%;

    height: 86%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;



}



.divCentral {

    width:30%;

    /* background-color: blueviolet; /**/

}


@media screen and (max-width: 730px) {

	.fontMob12{font-size: 0.6rem;} 
	.fontMob14{font-size: 0.8rem;} 
	.fontMob16{font-size: 1rem;} 
	.fontMob18{font-size: 1.2rem;} 
	.fontMob20{font-size: 1.3rem;} 
	.fontMob22{font-size: 1.4rem;} 
	.fontMob24{font-size: 1.5rem;} 
	.fontMob26{font-size: 1.6rem;} 
	.fontMob28{font-size: 1.8rem;} 
	.fontMob30{font-size: 1.9rem;} 
	.fontMob32{font-size: 2rem;} 
	.fontMob34{font-size: 2.2rem;} 
	.fontMob36{font-size: 2.4rem;} 
	.fontMob40{font-size: 2.5rem;} 
	.fontMob42{font-size: 2.6rem;} 
	.fontMob48{font-size: 3rem;} 
	.fontMob64{font-size: 4rem;} 

    .wMobi30{width:30%;} 
    .wMobi40{width:40%;} 
    .wMobi50{width:50%;} 
    .wMobi60{width:50%;}
    .wMobi70{width:70%;}
    .wMobi80{width:80%;}
    .wMobi90{width:90%;}
    .wMobi100{width:100%;} 
    

    .textMobiRight{text-align:right;} 
    .textMobiLeft{text-align:left;} 
    .textMobiCenter{text-align: center;} 


    .boxBanner {
        width: 94%;
        max-width:100%x;
        border-radius: 20px;    
    }


    .divCentral {

        width:100%;

    }



    

    .diminuir {

        scale:75%;

    }



    .diminuirMais {

        scale:65%;

    }



    .cardContainer {

        flex-direction: column;

    }



    .card {



        scale: 100%;

        opacity: 1;



        width: 90%;

        margin-bottom: 2rem;

        transition-delay: 0s;

        

    }

    



    .metade {

        width: 100%;

        scale:70%; /**/

    }



    .suporte {

        flex-direction: column;

    }



    .banner {

        background-color: rgb(10, 10, 29, 0.7);

    }



    .imgLogoScrool {

        scale:100%;

    }



    .texto01 {

        padding: 0px 20px 16px 20px;

        font-size:2.0rem; 

    }



    .texto02 {

        padding: 0px 20px 16px 20px;

        font-size: 1.2rem;  

    }



    .texto03 {

        padding: 0px 20px 16px 20px;

        font-size:1rem;

    }



    .texto04 {

        padding: 0px 20px 0px 20px;

        font-size:1.2rem;

    }



    .texto05 {

        font-size:0.8rem;   

    }







    .button {font-size: 0.9rem;}



    .button2 {font-size: 0.9rem;}







    .logo{



        width:100%;

        display: flex; 

        justify-content: space-between;

        scale: 60%;



    }



    

    .boxFooter {



        display: flex;

        flex-direction: column;

        gap: 20px;

        width: 90%;

        /*margin-left: 20px; /**/



    }





    #buttomDown1 {



        display: none; /**/



    }







    .header-menu {



        display: none; /**/

        width: 2vw;



    }



    .desk-menu {

        display: none;

    }



    .mobile-menu-icon {



        display: block;



    }







    .mobile-menu-icon button {



        background-color: transparent;



        border: none;



        cursor: pointer;



    }



    .mobile-menu ul {



        display: flex;



        flex-direction: column;



        text-align: center;



        padding-bottom: 1rem;



    }



    .mobile-menu .nav-item {



        display: block;



        padding-top: 1.2rem;



    }



    .mobile-menu .login-button {



        display: block;



        padding: 1rem 2rem;



    }



    .mobile-menu .login-button button {



        width: 100%;



    }





    .header-container {



        justify-content:left ; /* */

        align-items: start; /* */

        flex-direction: column;



    }





    header {



        /* background-color: #000;  /**/

        height: 80px;



    }





    header.fixed {



       /*  background-color: #000;  /**/



    }



    .boxContainer {

      

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;



        gap: 0px ;



    }



    .box1{

        margin-top: 1.5rem;

        margin-bottom: 1.5rem;

    

    }

    .mobileNone{
        display:none;
    }

    .container-text1{ 

        margin-bottom: 0.1rem;

        text-align: center;

        font-size: 1.2rem;

    }



    .container-text1 div{ 

        margin-bottom: 0.1rem;

        text-align: center;

        font-size: 1.2rem;;

    }

    
    .mobile0h {height:0px;}
    .mobile10h {height:0px;}
    .mobile20h {height:20px;}
    .mobile40h {height:40px;}
    
    
    .mobileHidden {
        display: none;
    }
    



}







@keyframes apear {



    from{

        opacity: 0;

        translate: -100vw 0;

    }

    to{

        opacity: 1;

        translate: 0 0;



    }



}