@charset "UTF-8";
/*-----------------------------------------------------------------------------------

  CUSTOM CSS CNX NOVA ODESSA

-----------------------------------------------------------------------------------*/

:root {
  --white-color-cnx: #ffffff;
  --green-color-cnx: #51e995;
  --blue-color-cnx: #006ef8;
  --dark-blue-color-cnx: #00377c;
  --yellow-color-cnx: #ffc900;
  --pink-color-cnx: #ff9dd4;
  --orange-color-cnx: #ff7b00;
  --black-color-cnx: #000000;
  --smoke-color-cnx: #fbf5e8;

  --title-color: #141D38;
  --body-color: #737887;
  --smoke-color2: #E2E8FA;
  --black-color2: #080E1C;
  --gray-color: #bdbdbd;
  --light-color: #72849B;
  --success-color: #28a745;
  --error-color: #dc3545;
  --th-border-color: #E0E0E0;
  --title-font: 'Barlow', sans-serif;
  --body-font: 'Roboto', sans-serif;
  --icon-font: "Font Awesome 6 Pro";
  --main-container: 1220px;
  --container-gutters: 24px;
  --section-space: 120px;
  --section-space-mobile: 80px;
  --section-title-space: 60px;
  --ripple-ani-duration: 5s;
}


.hidden {
  display: none !important;
}

.contact__social ul li {
    display: inline-block;
    margin-right: 0px;
}

.contact__social ul li a {
    width: 30px;
    height: 30px;
    line-height: 34px;
    color: #fff;
}


.footer__social ul li:not(:last-child) {
    margin-right: 0px;
}

/***** classes para usar com renderMediaResponsive *****/
.media-responsive {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 8px;
}


.media-square { aspect-ratio: 1 / 1; }
.media-landscape { aspect-ratio: 16 / 9; }
.media-portrait { aspect-ratio: 3 / 4; }
/******* Fim ******/



.thank-you-box {
  padding: 40px;
  border-radius: 12px;
  margin: auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
.thank-you-box i {
  font-size: 3rem;
  color: #0dcaf0;
  margin-bottom: 20px;
}
a.btn-home {
  margin-top: 30px;
  background-color: #0dcaf0;
  color: #000;
  border: none;
}
a.btn-home:hover {
  background-color: #fff;
  color: #006ef9;
}


.services__item_ecossistema  {
  text-align: center;
}

.services__item_ecossistema img {
  width: 70%;
}


.testimonial__nav-thumb {
    cursor: pointer;
}

.about__review {
    left: -165px;
    top: 180px;
}


.dropdown-content {
   display: none; /* Inicialmente oculta */
   position: absolute;
   background-color: var(--white-color-cnx);
   width: 450px;
   box-shadow: 0 8px 16px rgba(0,0,0,0.2);
   padding: 15px;
   z-index: 1;
   border: 1px solid #ccc;
   border-radius: 5px;
   margin-top: 460px; /* Ajuste de posicionamento */
}

.course__tab-2 .nav-tabs .nav-item {
  width: 50%;
}

.contact__form-input select {
  width: 100%;
  height: 56px;
  line-height: 54px;
  padding: 0 23px;
  background: #f3f4f8 url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230e1133" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') no-repeat right 15px center;
  background-size: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  border: 2px solid #f3f4f8;
  color: #0e1133;
  font-size: 15px;
  margin-bottom: 20px;
  cursor: pointer;
}


.contact__form-input input, .contact__form-input textarea {
  width: 100%;
  height: 56px;
  line-height: 54px;
  padding: 0 23px;
  background: #f3f4f8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: 2px solid #f3f4f8;
  color: #0e1133;
  font-size: 15px;
  margin-bottom: 20px;
}

.contact__form-input textarea {
  height: 180px;
  padding: 23px 25px;
  line-height: 1.1;
  resize: none;
  margin-bottom: 13px;
}

.swiper-container {
    width: 100%; /* O carrossel ocupa toda a largura disponível */
    padding: 20px 0;
}

.swiper-wrapper {
    display: flex; /* Garante o alinhamento correto dos slides */
}

.swiper-slide {
    display: flex; /* Permite que os itens internos fiquem alinhados corretamente */
    justify-content: center; /* Centraliza o card dentro do slide */
    align-items: center; /* Alinha verticalmente */
    width: auto; /* Ajusta a largura dinamicamente com base nos slides visíveis */
}

.services__item {
    width: 100%; /* Faz o card ocupar todo o espaço disponível */
    /* max-width: 320px; /* Define uma largura máxima, se necessário */
}




.responsive-video {
    width: 100%; 
    height: auto;
    max-width: 100%;
}

.page__title-3 {
  font-size: 35px;
}


.course__description p {
  color: var(--black-color-cnx);
}

.course__tab-2 .nav-tabs .nav-item .nav-link.active {
  background: var(--blue-color-cnx);
}

.course__sm-price span {
  color: var(--black-color-cnx);
  font-weight: 400;
  line-height: 25px;
}


.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.course__item-3 .course__content {
  border: 1px solid #eef0f6;
}

/*Botões de compartilharr*/
.mry-share-btns {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.share-link {
    position: relative;
    display: inline-block;
    width: 35px; /* Tamanho dos botões */
    height: 35px;
    background-color: #8a8a8a; /* Cor dos botões */
    color: #fff;
    text-decoration: none;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    font-size: 16px; /* Tamanho dos ícones */
    z-index: 10;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.whatsapp-link {
    background-color: #4CAF50; /* Cor do WhatsApp */
}

.share-link:hover {
    background-color: #666666; /* Cor no hover */
    transform: scale(1.05); /* Aumento no hover */
}

.tooltip {
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.9);
  color: #e0e0e0;
  text-align: left;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  position: absolute;
  z-index: 1000;
  top: -30px;
  left: 0%;
  transform: translateX(10px) translateY(0);
  width: max-content;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%; /* Posiciona a seta abaixo do tooltip */
    left: 10%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent; /* Seta apontando para o botão */
}

.share-link:hover .tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(10px) translateY(-5px); /* Move o tooltip para a direita e para cima no hover */
}





::selection {
  background: var(--orange-color-cnx);
}

.contact__form-input input:focus, .contact__form-input textarea:focus {
  border-color: var(--dark-blue-color-cnx);
}

.testimonial__item-3 h4 {
  color: #ffc900;
}

.testimonial__thumb-3 {
  height: 430px;
}

.about__review {
  position: absolute;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  background: #f9f1f1;
  padding: 2px 5px;
  display: block;
}

.page__title {
  font-size: 60px;
  line-height: 50px;
}

.page__title-overlay::after {
  background: rgba(0, 0, 0, 0.05);
}

.page__title-height {
  min-height: 250px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--blue-color-cnx);
}

.sidebar-toggle-btn .line {
  background-color: var(--white-color-cnx);
}

.main-menu ul li .submenu li a::before {
  background: var(--blue-color-cnx);
}

.footer__copyright-2 p a {
  color: var(--blue-color-cnx);
}

.progress-wrap::after {
  color: var(--blue-color-cnx);
}

.orange-color-cnx {
  color: var(--orange-color-cnx);
  font-weight: bold;
}

.white-color-cnx {
  color: var(--white-color-cnx);
  font-weight: bold;
}

.footer__link-2 ul li a:hover {
  color: var(--blue-color-cnx);
}

.footer__widget-title-2 {
  color: var(--black-color-cnx);
}

.blue-bg {
  background: var(--blue-color-cnx);
}

.section__sub-title {
  color: var(--blue-color-cnx);
}

.why__btn .link-btn:hover {
  color: var(--blue-color-cnx);
}

.section__title {
  color: var(--black-color-cnx);
}

.course__content p {
  color: var(--black-color-cnx);
}

.course__teacher h6 {
  font-size: 14px;
  font-weight: 400;
  color: #888;
}

.course__menu button {
  color: var(--black-color-cnx);
}

.course__menu button .tag {
  background: var(--blue-color-cnx);
}

.course__menu button .tag::after {
  border-left: 5px solid var(--blue-color-cnx);
}

.course__menu button:hover, .course__menu button.active {
  color: var(--blue-color-cnx);
}

.grey-bg {
  background: var(--smoke-color-cnx);
}

.floating-button.cnxsumare i {
  color: var(--white-color-cnx);
}


.floating-button.ouvidoria i {
  color: var(--white-color-cnx);
}

.floating-button.trabalhe i {
  color: var(--white-color-cnx);
}

.floating-button.wpp i {
  color: var(--white-color-cnx);
}

.floating-button.cnxsumare {
  background-color: var(--blue-color-cnx);
}

.floating-button.ouvidoria {
  background-color: var(--black-color-cnx);
}


.floating-button.trabalhe {
  background-color: var(--dark-blue-color-cnx);
}

.floating-button.wpp {
  background-color: #3cc13f
}

.floating-buttons {
    position: fixed;
    top: 70%; /* Centraliza no eixo Y */
    right: 0px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    transform: translateY(-50%); /* Ajusta o contêiner para ficar no centro */
}

.floating-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #444;
    color: white;
    text-decoration: none;
    border-radius: 4px; /* Pequeno border-radius */
    position: relative;
    overflow: hidden;
    transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.floating-button i {
    font-size: 24px;
    transition: transform 0.4s ease-in-out;
}

.floating-button span {
    position: absolute;
    left: 70px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    color: white;
    font-size: 16px;
}

.floating-button.trabalhe:hover i {
    transform: translateX(-75px); /* Movimento mais suave do ícone */
}


.floating-button.wpp:hover i {
    transform: translateX(-85px); /* Movimento mais suave do ícone */
}

.floating-button.cnxsumare:hover i {
    transform: translateX(-65px); /* Movimento mais suave do ícone */
}

.floating-button.trabalhe:hover {
    width: 230px;
}

.floating-button.cnxsumare:hover {
    width: 210px;
}

.floating-button.wpp:hover {
    width: 260px;
}

.floating-button:hover {
    width: 180px; /* Ajuste menor da largura */
    border-radius: 4px; /* Mantém o border-radius pequeno */
}

.floating-button:hover i {
    transform: translateX(-50px); /* Movimento mais suave do ícone */
}

.floating-button:hover span {
    opacity: 1;
}










div.about__content a.botao-wp {
  color: #3cc13f !important;
  background: #eefbef !important;
  transition: all .2s ease-in-out;
  border: 1px solid #3cc13f !important;
  font-weight: 600;
  text-decoration: none;
  text-transform: none !important;
}

.about__list ul li i {
  color: var(--green-color-cnx);
}

.about__thumb img {
  width: 100%;
}

.header__area.sticky {
  background: #006ef8;
}

.pink-bg {
  background: var(--pink-color-cnx);
}

.green-bg {
  background: var(--green-color-cnx);
}


.orange-bg {
  background: var(--orange-color-cnx);
}

.hero__thumb-2 img.hero-shape-pink {
  position: absolute;
  left: 0;
  bottom: 19%;
  z-index: -1;
  width: 100%;
}

.services__content p span {
  color: var(--yellow-color-cnx);
}

.services__content p {
  color: var(--white-color-cnx);
  opacity: 1;
}

.services__title {
  text-transform: uppercase;
  color: var(--white-color-cnx);
}

.hero__shape img.hero-1-triangule-2 {
  bottom: 10%;
  left: 0;
}

.hero__content-2 p {
  color: var(--orange-color-cnx);
  margin-bottom: 10px;
}


.hero__content-2 h4 {
  color: var(--white-color-cnx);
  margin-top: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  font-size: 18px;
}

.hero__title-2 {
  margin-bottom: 0;
}

.hero__title-2 {
  color: var(--dark-blue-color-cnx);
  margin-bottom: 10px;
}

.main-menu ul li:hover > a {
  color: var(--yellow-color-cnx);
}

.main-menu-2 ul li:not(:first-child) {
  margin-left: 30px;
}

.e-btn {
  background: #ff7b00;
  text-transform: none;
}

.main-menu ul li.has-dropdown > a::after {
  color: var(--white-color-cnx);
}

.main-menu ul li a {
  color: var(--white-color-cnx);
}

.blue-bg-3 {
  background: var(--dark-blue-color-cnx);
}

.loading-logo-icon-2 {
  width: 40%;
  height: auto;
  transform-origin: center;
  animation: eucal-loading-focus 5s linear infinite;
}