html {scroll-behavior: smooth;}
html :where(img) {height: auto; max-width: initial;}

.lp-app__buttons img {height: 40px !important;}

.hero { height: auto; overflow: hidden; background-image: url("../images/conta-corrente/pattern-bg.png"); background-position: top left; background-repeat: no-repeat;	background-size: contain; 	position: relative; }
.hero__description .t-breadcrumbs, .hero__description .t-breadcrumbs a, .hero__description .t-breadcrumbs .breadcrumb_last { color: var(--t-white); }
.hero__description .t-breadcrumbs a:hover { color: var(--t-white) !important; opacity: 0.8; text-decoration: underline; }
.hero__image { width: 45%; height: 100%; position: absolute; top: 0; right: 0; background: url("../images/conta-corrente/bg-image-filter.png"); background-size: contain; background-position: top right; background-repeat: no-repeat; }

@media only screen and (min-width: 1040px) and (max-width: 1440px){ .hero__image { width: 50%; }  }
@media (max-width: 990px) { .hero__image { display: none;}  }

.hero .t-breadcrumbs a:hover { color: initial; opacity: 0.8; text-decoration: underline}
.hero .t-breadcrumbs .seta-separador {letter-spacing: -4px; margin-right: 5px; font-weight: 900;}
.hero__description { padding-bottom: 140px; width: 50%; }
@media (max-width: 990px) {.hero__description {width: 100%; padding-left: 15px; padding-right: 15px;}}
.hero__description h1 { font-size: 3.5rem; font-weight: bold;}
.hero__description h2 { font-size: 2rem }
@media only screen and (min-width: 1024px) and (max-width: 1440px){.hero__description h1 { font-size: 2rem;} .hero__description {padding-bottom: 0;} .hero__description h1::after {margin: 12px 0 0;} .hero__description h2 {font-size: 1.5rem;} .hero__description {padding-bottom: 2rem !important;}}

.tarja h2 {font-size: 1.4rem;}

.vantagens h2 {font-size: 2.5rem; font-weight: bold}
.card_outline {display: flex; flex-direction: column; justify-content: center; min-height: 190px; border: 2px solid var(--t-blue); background: var(--t-white); border-radius: 8px;}
.card_outline h3 {font-size: 1.2rem; font-weight: bold}
.card_outline img {place-self: center}

.credito_item img {width: 100%; object-fit: cover; object-position: center; height: 468px}
.credito_item h2 {font-size: 2.5rem; font-weight: bold;}
.credito_item p {max-width: 650px; font-size: 18px;}

.internet-banking h2 {font-size: 2rem; font-weight: 900;}
.internet-banking p {font-size: 1.5rem}
.internet-banking a.btn {max-width: 360px;}

.aplicativo {background: url(../images/conta-corrente/line-bg.png) no-repeat bottom center, linear-gradient(87.2deg, #054375 0.26%, #0D5D9D 65.89%); }
.aplicativo h2 {font-weight: 900; font-size: 2.5rem}
.aplicativo h3 {font-size: 1.5rem; font-weight: 300}
.aplicativo p {font-size: 1rem;}
.aplicativo p strong {font-weight: 700}


@media(min-width: 768px){
	.video_container {width: 60%}
}

.cadastro .container {max-width: 800px;}
.cadastro h2 {font-size: 40px; font-weight: bold}
.cadastro h3 {font-size: 24px; font-weight: 400}
.cadastro .form-lead input.form-control, .cadastro .form-lead select.form-control {width: 100%; height: 48px; background: var(--t-white); border: 1px solid var(--t-blue); border-radius: 0; color: var(--t-blue)}
.cadastro .form-lead input.form-control::placeholder {color: var(--t-blue)}
.cadastro p a {font-weight: bold}
@media (min-width: 768px){
	.cadastro {background: url('../images/conta-corrente/pattern-form-bg.png') no-repeat; background-position: 78% 60%; background-size: auto;}
}

.btn.btn-branco, .btn.btn-azul-tribanco {display: block; max-width: 282px; padding: 16px 32px;}
.stack-h{display: block;}
@media (min-width: 768px){.stack-h{display:grid;grid-template-columns:1fr 1fr}}