@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");

@font-face {
  font-family: "conex-font";
  src: url("/assets/fonts/conex-font.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  overflow-x: none;
}

:root {
  --preto: #282f3b;
  --branco: #ffffff;
  --verde: #50bc81;
  --verde-2: #0e955f;
}

/*Conex Bank - Layout*/
.row {
  margin: 0 !important;
}

body {
  background-color: var(--verde);
}

.text-section {
  padding: 200px 100px 200px 200px;
  border-radius: 8px;
}

.image-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.container-fluid {
  padding-left: 100px;
  padding-right: 100px;
}

.icon-0 {
  width: 40px;
  height: 40px;
}

/*Conex Bank - Fonts*/
h1 {
  font-family: "conex-font", sans-serif;
  font-size: 100px;
  line-height: 80px;
  padding-bottom: 30px;
}

h2 {
  font-family: "conex-font", sans-serif;
  font-size: 50px;
}

h3,
p,
span,
a {
  color: var(--branco);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 100;
  text-decoration: none !important;
  font-size: 1.2rem;
  line-height: 2rem;
}

h4 {
  font-family: "conex-font", sans-serif;
  font-size: 70px;
  line-height: 80px;
  padding-bottom: 30px;
}

h5 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 100;
  font-size: 18px;
}

b {
  color: var(--verde);
  font-weight: 600;
}

.texto-verde {
  color: var(--verde) !important;
}

.texto-borda {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px;
  border-radius: 10px;
}

.box-texto {
  background-color: #282f3b;
  padding: 5px 10px;
  border-radius: 8px;
  line-height: 80px;
  border: 1px solid rgba(0, 255, 85, 0.26);
}

.box-01 {
  padding: 15px;
  border: #ffffff60 1px solid;
}

.border-baixa {
  border-bottom: #0e955f 2px solid;
  margin: 50px 0;
}

.cards {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

/*Conex Bank - Elementos*/
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 999;
}

.dropdown-servicos {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 180px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  display: none;
}

.nav-item:hover .dropdown-servicos {
  display: block;
}

.dropdown-servicos a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  font-size: 16px;
}

.dropdown-servicos a:hover {
  background: #f2f2f2;
}


nav {
  padding: 50px 200px !important;
  border-bottom: rgba(30, 61, 54, 0.5) 0.1px solid;
}

.navbar-link {
  margin: 0 15px;
  font-size: 17px;
  display: inline-block;
}

.navbar-link:hover {
  color: var(--verde);
}

.navbar img {
  margin: 0 20px;
  max-width: 300px;
  padding: 20px 0px;
}

.borda {
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.borda:hover {
  border: 1px solid #50bc81;
}

.risco {
  color: var(--branco) !important;
  background: url(/assets/risco.svg) center/auto no-repeat;
}

.btncnx {
  font-weight: 600 !important;
  padding: 15px 40px;
  border-radius: 5px;
  background-color: var(--verde);
  color: var(--preto);
  border: solid 1px transparent;
  transition: background-color 0.3s, border 0.3s, color 0.3s;
}

.btncnx-2 {
  font-weight: 600 !important;
  padding: 15px 40px;
  border-radius: 5px;
  background-color: #d6d6d600;
  color: var(--branco);
  border: solid 1px #d6d6d6;
  transition: background-color 0.3s, border 0.3s, color 0.3s;
}

.btncnx:hover,
.btncnx-2:hover {
  color: var(--branco);
  border: solid 1px rgba(203, 255, 190, 0.1);
  background-color: var(--verde-2);
}

.iso {
  margin-top: -200px;
  right: 0;
}

.icon {
  max-width: 200px;
  margin: 10px;
}

/*Conex Bank - Accordion*/
.accordion {
  color: var(--preto);
  padding: 10px;
}

.accordion-item {
  -webkit-box-shadow: 10px 10px 259px -84px rgba(80, 188, 129, 1);
  -moz-box-shadow: 10px 10px 259px -84px rgba(80, 188, 129, 1);
  box-shadow: 10px 10px 259px -84px rgba(80, 188, 129, 1);
}

.accordion h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  line-height: 25px;
}

.accordion-button {
  border-radius: 30px;
  background-color: #e2e2e2;
  color: #282f3b;
}

.accordion-button:not(.collapsed) {
  background-color: var(--branco);
  color: #50bc81;
}

.accordion-button:focus {
  color: #50bc81 !important;
  border: 1px solid #e2e2e2 !important;
}

/** Conex 1 **/
.conex-01 {
  background: url(/assets/bg/bg-1.webp) center/cover no-repeat;
  color: var(--branco);
  padding: 20px 0 150px;
}

.conex-01 h1 {
  font-size: 90px;
}

.logo {
  max-width: 300px;
  padding: 20px 0px;
}

.conex-1 {
  background: url(/assets/bg/bg-1.webp) center/cover no-repeat;
  color: var(--branco);
}

.conex-1 h1 {
  font-size: 90px;
}

.conex-1 p {
  font-size: 20px;
  margin-right: 70%;
}

/** Conex 2 **/
.conex-2 {
  background: url(/assets/bg/bg-2.webp) center bottom/cover no-repeat;
  color: var(--branco);
  padding: 100px 0;
}

/** Conex 3 **/
.conex-3 {
  background: url(/assets/bg/bg-3.webp) center bottom/cover no-repeat;
}

.conex-3 i {
  font-size: 50px;
  margin: 5px 15px 5px 0;
}

/** Conex 4 **/
.conex-4 {
  background: url(/assets/bg/bg-4.webp) center bottom/cover no-repeat;
}

/** Conex 5 **/
.conex-5 {
  padding: 50px 0;
  background: url(/assets/bg/bg-3.webp) center bottom/cover no-repeat;
}

.conex-5 i {
  font-size: 50px;
}

/** Conex 6 **/
.conex-6 {
  background: url(/assets/bg/bg-6.webp);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/** Conex 7 **/
.conex-7 {
  padding: 50px 0;
  background: url(/assets/bg/bg-3.webp) center bottom/cover no-repeat;
}

.conex-7 .caixas {
  font-weight: 500;
  padding: 20px;
  border-radius: 8px;
  background-color: rgba(223, 223, 223, 0.3);
  border: 1px solid #ebebeb;
  transition: background-color 0.5s;
}

.conex-7 .caixas:hover {
  background-color: rgb(255, 255, 255);
}

.conex-7 i {
  font-size: 50px;
}

.conex-7 .caixas h4 {
  line-height: 20px;
}

.conex-7 .caixas h3 {
  font-size: 18px;
  line-height: 30px;
}

/* Conex 7-2 */
.conex-7-2 {
  background: linear-gradient(135deg, #0e955f, #19b877);
  padding: 100px 0 20px;
  color: var(--branco);
}

/** Conex 8 **/
.conex-8 {
  background: url(/assets/bg/bg-8.webp);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  color: var(--branco);
  padding: 50px;
}

.conex-8 .btncnx {
  background-color: var(--verde-2);
}

.conex-8 .btncnx:hover {
  color: #50bc81;
  background-color: var(--branco);
}

/** Footer **/
footer {
  background-color: #131820;
}

.rodape {
  font-size: 15px;
  line-height: 20px;
  color: #d6d6d6;
}

.rodape a {
  font-size: 15px;
  color: var(--branco);
}

.rodape a:hover {
  color: var(--verde);
}

.borda-rodape {
  border-radius: 8px;
  padding: 15px 20px;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(217, 217, 217, 0.03405112044817926) 100%);
}

.borda-rodape h3 {
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.borda-rodape a:hover {
  color: #50bc81 !important;
}

/* Sobre */
.sobre {
  background: url(/assets/bg/bg-base.png) center/cover no-repeat;
  color: var(--branco);
  padding: 20px 0 150px;
}

/* Termos */
.termos {
  background: url(/assets/bg/bg-base.png) center/cover no-repeat;
  color: var(--branco);
  padding: 20px 0 150px;
}

#menuMobile .modal-content {
  background-color: #0a764b;
  color: white;
  border: none;
}

#menuMobile a {
  color: white;
  text-decoration: none;
}

#menuMobile a:hover {
  opacity: 0.8;
}

.navbar-toggler {
  background-color: var(--verde);
  padding: 10px 15px 20px;
}

.modal-body {
  background-color: #0a764b66;
}

.modal-content {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  color: #fff;
}

.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.5);
}