@font-face {
    font-family: Grotesk;
    src: url(Fonts/NHaasGroteskTXPro-75Bd.ttf);
}

@font-face {
    font-family: GroteskFina;
    src: url(Fonts/NHaasGroteskTXPro-55Rg.ttf);
}

@font-face {
    font-family: Rubik;
    src: url(Fonts/static/Rubik-Regular.ttf);
}

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.croma{
    background-color: rgb(39, 223, 14);
}

.crome{
    background-color: rgb(223, 38, 14);
}


.sections{
    padding-top: 6%;
    padding-bottom: 6%;
}

.titulo{
    font-family: Grotesk, sans-serif;
    color: #002f51;
    font-size: 40px; 
}

/*=========================== LANDING XL*/
.landingXL{
    background: url(img/corporativo/fundo.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    padding-top: 20em;
    padding-bottom: 20em;
}
.fraseXL{
    font-family: Grotesk, sans-serif;
    font-size: 40px;
    color: #ffffff;
    padding-left: 4em;
}
.subfraseXL{
    font-family: Rubik, sans-serif;
    font-size: 25px;
    color: #ffffff;
}
.giraPalavraXL{
    font-family: Grotesk, sans-serif;
    display: inline-block;
    color: #E41E7C;
    font-size: 40px;
}
.giraPalavraXL span{
    position: absolute;
    top: 8em;
    overflow: hidden;
    animation: animateXL 10s linear infinite;
    opacity: 0;
}
@keyframes animateXL{
    0%{opacity:0; transform: translateY(-30px);}
    2%{opacity:1; transform: translateY(0px);}
    18%{opacity:1; transform:translateY(0px);}
    20%{opacity:0; transform:translateY(30px);}
    100%{opacity:0; transform:translateY(30px);}
}
.giraPalavraXL span:nth-child(1){animation-delay: 0s;}
.giraPalavraXL span:nth-child(2){animation-delay: 2s;}
.giraPalavraXL span:nth-child(3){animation-delay: 4s;}
.giraPalavraXL span:nth-child(4){animation-delay: 6s;}
.giraPalavraXL span:nth-child(5){animation-delay: 8s;}

/*=========================== LANDING LG*/
.landingLG{
    background: url(img/corporativo/fundo.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-top: 15em;
    padding-bottom: 15em;
}
.fraseLG{
    font-family: Grotesk, sans-serif;
    font-size: 32px;
    color: #ffffff;
    padding-left: 4em;
}
.subfraseLG{
    font-family: GroteskFina, sans-serif;
    font-size: 20px;
    color: #ffffff;
}
.giraPalavraLG{
    font-family: Grotesk, sans-serif;
    display: inline-block;
    color: #E41E7C;
}
.giraPalavraLG span{
    position: absolute;
    top: 7.5em;
    overflow: hidden;
    animation: animateLG 10s linear infinite;
    opacity: 0;
}
@keyframes animateLG{
    0%{opacity:0; transform: translateY(-30px);}
    2%{opacity:1; transform: translateY(0px);}
    18%{opacity:1; transform:translateY(0px);}
    20%{opacity:0; transform:translateY(30px);}
    100%{opacity:0; transform:translateY(30px);}
}
.giraPalavraLG span:nth-child(1){animation-delay: 0s;}
.giraPalavraLG span:nth-child(2){animation-delay: 2s;}
.giraPalavraLG span:nth-child(3){animation-delay: 4s;}
.giraPalavraLG span:nth-child(4){animation-delay: 6s;}
.giraPalavraLG span:nth-child(5){animation-delay: 8s;}

/*=========================== LANDING MD*/
.landingMD{
    background: url(img/corporativo/fundo.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-top: 10.85em;
    padding-bottom: 9.85em;
}
.fraseMD{
    font-family: Grotesk, sans-serif;
    font-size: 50px;
    color: #ffffff;
    padding-left: 3.2em;
}
.subfraseMD{
    padding-top: 20px;
    font-family: Rubik, sans-serif;
    font-size: 20px;
    color: #ffffff;
}
.giraPalavraMD{
    font-family: Grotesk, sans-serif;
    display: inline-block;
    color: #E41E7C;
}
.giraPalavraMD span{
    font-size: 50px;
    position: absolute;
    top: 6.5em;
    overflow: hidden;
    animation: animateMD 10s linear infinite;
    opacity: 0;
}
@keyframes animateMD{
    0%{opacity:0; transform: translateY(-30px);}
    2%{opacity:1; transform: translateY(0px);}
    18%{opacity:1; transform:translateY(0px);}
    20%{opacity:0; transform:translateY(30px);}
    100%{opacity:0; transform:translateY(30px);}
}
.giraPalavraMD span:nth-child(1){animation-delay: 0s;}
.giraPalavraMD span:nth-child(2){animation-delay: 2s;}
.giraPalavraMD span:nth-child(3){animation-delay: 4s;}
.giraPalavraMD span:nth-child(4){animation-delay: 6s;}
.giraPalavraMD span:nth-child(5){animation-delay: 8s;}

/*=========================== LANDING SM*/
.landingSM{
    background: url(img/corporativo/fundo.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-top: 11em;
    padding-bottom: 11em;
}
.fraseSM{
    font-family: Grotesk, sans-serif;
    font-size: 40px;
    color: #ffffff;
    padding-left: 4em;
}
.subfraseSM{
    padding-top: 30px;
    font-family: GroteskFina, sans-serif;
    font-size: 18px;
    color: #ffffff;
}
.giraPalavraSM{
    font-family: Grotesk, sans-serif;
    display: inline-block;
    color: #E41E7C;
}
.giraPalavraSM span{
    font-size: 40px;
    position: absolute;
    top: 7.3em;
    overflow: hidden;
    animation: animateSM 10s linear infinite;
    opacity: 0;
}
@keyframes animateSM{
    0%{opacity:0; transform: translateY(-30px);}
    2%{opacity:1; transform: translateY(0px);}
    18%{opacity:1; transform:translateY(0px);}
    20%{opacity:0; transform:translateY(30px);}
    100%{opacity:0; transform:translateY(30px);}
}
.giraPalavraSM span:nth-child(1){animation-delay: 0s;}
.giraPalavraSM span:nth-child(2){animation-delay: 2s;}
.giraPalavraSM span:nth-child(3){animation-delay: 4s;}
.giraPalavraSM span:nth-child(4){animation-delay: 6s;}
.giraPalavraSM span:nth-child(5){animation-delay: 8s;}

/*=========================== LANDING XS*/
.landingXS{
    background: url(img/corporativo/fundo.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    padding-top: 10em;
    padding-bottom: 10em;
}
.fraseXS{
    font-family: Grotesk, sans-serif;
    font-size: 30px;
    color: #ffffff;
    padding-left:1em;
}
.subfraseXS{
    padding-top: 20px;
    font-family: Rubik, sans-serif;
    font-size: 20px;
    color: #ffffff;
    line-height: 25px;
}
.giraPalavraXS{
    font-family: Grotesk, sans-serif;
    display: inline-block;
    color: #E41E7C;
}
.giraPalavraXS span{
    font-size: 32px;
    position: absolute;
    top: 7.9em;
    overflow: hidden;
    animation: animateXS 10s linear infinite;
    opacity: 0;
}
@keyframes animateXS{
    0%{opacity:0; transform: translateY(-30px);}
    2%{opacity:1; transform: translateY(0px);}
    18%{opacity:1; transform:translateY(0px);}
    20%{opacity:0; transform:translateY(30px);}
    100%{opacity:0; transform:translateY(30px);}
}
.giraPalavraXS span:nth-child(1){animation-delay: 0s;}
.giraPalavraXS span:nth-child(2){animation-delay: 2s;}
.giraPalavraXS span:nth-child(3){animation-delay: 4s;}
.giraPalavraXS span:nth-child(4){animation-delay: 6s;}
.giraPalavraXS span:nth-child(5){animation-delay: 8s;}

/*=========================== MENSAGEM ANTES DO CONTEÚDO*/
.integracao{
    background-color: #002f51;
    padding-top:200px;
    padding-bottom:200px;
}
.integracaoTexto{
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: rgb(40, 167, 240);
    font-family: Grotesk, sans-serif;
    font-size: 60px;
    color: rgba(248, 248, 248, 0);
    text-align: left;
}
.integracaoTexto2{
    font-family: Grotesk, sans-serif;
    font-size: 60px;
    color: rgb(255, 255, 255);
}


/*=========================== TÓPICOS XL*/
@media only screen and (min-device-width: 1031px){
    .tablet{display: none}
    .mobile{display: none}
    .area{
        /* padding-left: 100px;
        padding-right: 100px; */
        padding-top: 100px;
        padding-bottom: 100px;
        background-color: rgb(255, 255, 255);
    }
    .areaCinza{
        /* padding-left: 100px;
        padding-right: 100px; */
        padding-top: 100px;
        padding-bottom: 100px;
        background-color: rgb(248, 248, 248);
    }
    .ultimaArea{
        padding-left: 100px;
        padding-right: 100px;
        padding-top: 100px;
        padding-bottom: 10px;
        background-color: rgb(248, 248, 248);
    }
    .topico{
        padding-top:2em;
        font-family: Grotesk, sans-serif;
        font-size: 40px;
        color: #002F51;
    }
    .subtopico{
        font-family: Grotesk, sans-serif;
        font-size: 25px;
        color: #002F51;
    }
    .imagem{
        max-width: 100%; 
        height: auto;
    }
}

/*=========================== TÓPICOS LG e MD*/
/* @media only screen and (max-device-width: 1560px){
    .tablet{display: none}
    .mobile{display: none}
    .area{
        padding-left: 50px;
        padding-right: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .areaCinza{
        padding-left: 50px;
        padding-right: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
        background-color: rgb(248, 248, 248);
    }
    .topico{
        padding-top:1.5em;
        font-family: Grotesk, sans-serif;
        font-size: 45px;
        color: #002F51;
    }
    .subtopico{
        font-family: Grotesk, sans-serif;
        font-size: 25px;
        color: #002F51;
    }
}

@media only screen and (max-device-width: 1559px){
    .tablet{display: none}
    .mobile{display: none}
    .area{
        padding-left: 50px;
        padding-right: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .areaCinza{
        padding-left: 50px;
        padding-right: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
        background-color: rgb(248, 248, 248);
    }
    .topico{
        padding-top:1.5em;
        font-family: Grotesk, sans-serif;
        font-size: 38px;
        color: #002F51;
    }
    .subtopico{
        font-family: Grotesk, sans-serif;
        font-size: 20px;
        color: #002F51;
    }
}

@media only screen and (max-device-width: 1036px){
    .tablet{display: none}
    .mobile{display: none}
    .area{
        padding-left: 50px;
        padding-right: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .areaCinza{
        padding-left: 50px;
        padding-right: 100px;
        padding-top: 100px;
        padding-bottom: 100px;
        background-color: rgb(248, 248, 248);
    }
    .topico{
        padding-top:1.5em;
        font-family: Grotesk, sans-serif;
        font-size: 30px;
        color: #002F51;
    }
    .subtopico{
        font-family: Grotesk, sans-serif;
        font-size: 17px;
        color: #002F51;
    }
} */

@media only screen and (max-device-width: 1030px){
    .desk{display: none}
    .tablet{display: inline}
    .mobile{display: none}
    .area{
        padding-left: 50px;
        padding-right: 100px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .areaCinza{
        padding-left: 50px;
        padding-right: 100px;
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: rgb(248, 248, 248);
    }
    .topico{
        padding-top:1.5em;
        font-family: Grotesk, sans-serif;
        font-size: 40px;
        color: #002F51;
    }
    .subtopico{
        font-family: Grotesk, sans-serif;
        font-size: 26px;
        color: #002F51;
    }
}

@media only screen and (max-device-width: 720px){
    .areagrey{
        padding-top: 30px;
        padding-bottom: 30px;
        margin-top: 60px;
        margin-bottom: 10px;
        background-color: rgb(248, 248, 248);
    }
    .areawhite{
        padding-top: 50px;
        background-color: rgb(255, 255, 255);
    }
    .areagreyultimo{
        padding-top: 40px;
        padding-bottom: 30px;
        margin-top: 40px;
        background-color: rgb(248, 248, 248);
    }
    .desk{display: none}
    .tablet{display: none}
    .mobile{display: block}
    .topico{
        padding-top: 0px;
        font-family: Grotesk, sans-serif;
        font-size: 29px;
        color: #002F51;
    }
    .subtopico{
        font-family: Grotesk, sans-serif;
        font-size: 20px;
        color: #002F51;
    }
}

/*=========================== PLANOS*/
.anuncioPlanos{
    color: #ffffff;
    background-color: #002F51;
    padding-top: 6em;
    padding-bottom: 6em;
}
.anuncioPlanos h2{
    font-size: 45px;
    font-family: Grotesk, sans-serif;
}
.btn-outline-danger{
    color: #ffffff !important;
    border-color: #ffffff !important;
    width: 150px;
    height: 40px;
    font-family: Rubik, sans-serif;
}
.btn-outline-danger:hover{
    color: #ffffff !important;
    border-color: #E41E7C !important;
    background-color: #E41E7C !important;
    width: 150px;
    height: 40px;
}
.cartao{
    background: rgb(255, 255, 255);
    border-color: rgb(248, 248, 248);
    transition: 0.9s ease;
    cursor: pointer;
    margin:30px;
    border-radius: 40px;
    box-shadow: -6px -6px 20px rgba(255, 255, 255, .1), 6px 6px 20px rgba(0,0,0,0.1);
    /* box-shadow: 5px 5px 20px rgba(160, 160, 160, 0.548); */
}
.cartaoTitulo{
    font-family: Rubik, sans-serif;
    text-align: center;
    font-size: 2em;
    color: #002f51;
}
.cartaoPreco{
    font-family: Rubik, sans-serif;
    text-align: center;
    font-size: 2.5em;
    color: #E41E7C
}
.cartaoText{
    font-family: Rubik, sans-serif;
    color: #505050;
    font-size: 1em;
}
.cartao:hover {
    transform: scale(0.99);
    box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5), inset 6px 6px 20px  rgba(0,0,0,0.05);
}
.cartaoImage{width:100%;}
.order-button{
    background: rgb(255, 255, 255);
    border-color: rgb(248, 248, 248);
    color:#E41E7C;
    font-size:22px;
    border: none;
    transition: 0.9s ease;
    cursor: pointer;
    width: 8em;
    box-shadow: -6px -6px 20px rgba(255, 255, 255, .1), 6px 6px 20px rgba(0,0,0,0.1);
	display: block;
	width: 70%;
	height: 40px;
	margin: 5px auto;
	border-radius: 50px;
}
.order-button:hover{
    transform: scale(0.99);
    box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5), inset 6px 6px 20px  rgba(0,0,0,0.05);
}

.containerPreco{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
    margin-top:2%;
    margin-bottom: 3%;
}
.containerPreco .pricing-table{
	display:block;
	padding:20px;
	background:rgb(255, 255, 255);
	overflow:hidden;
	width:300px;
	margin:50px;
	border-radius:40px;
	box-shadow: -6px -6px 20px rgba(255, 255, 255, .1), 6px 6px 20px rgba(0,0,0,0.1);
	transform:scale(1);
	transition:all 900ms cubic-bezier(0.68,-0.55,0.265,1.55);
}
.containerPreco .pricing-table:hover{
	transform: scale(0.99);
    box-shadow: inset -6px -6px 10px rgba(255, 255, 255, 0.5), inset 6px 6px 20px  rgba(0,0,0,0.05);
}

/*=========================== PERGUNTAS*/
.collapseItem{
    cursor: pointer;
    color: #002f51;
    font-family:  Rubik, sans-serif;
    font-size: 18px;
}
.collapse{
    color: #505050;
    
    
}

.rodape {
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: auto;
    background-color: #002f51;
    color: #f7f7f5;
    font-family: Rubik, sans-serif;
}