/*pregress bar*/
.progress-container {position: fixed; top: 0; z-index: 1000; width: 100%; height: 8px;}
.progress-bar {height: 5px; background: #1C334C; width: 0%;}
.content {padding: 50px; height: 2000px; background: linear-gradient(to bottom, #fff, #f0f0f0);}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/*conteudo*/
/* sobre os investimentos */
.titulo_guia{background-color:#1C334C; width:100%; height:auto; float:left; text-align:center; color:#FFFFFF; font-size:25px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.6);  padding-top:25px; padding-bottom:25px;}

.container_explicacao{width:90%; height: auto; float: left; margin-left: 5%;}
.corpo_explicacao{width:90%; height: auto; float: left; margin-top: 5px; margin-bottom: 5px;}
.titulo_explicacao{width: 90%; height: auto; float: left; color:#1C334C; font-family: Arial, Helvetica, sans-serif; font-size: 25px; padding-bottom: 15px; padding-top: 10px; border-bottom: 1px solid #004f99;}
.txt_explicacao{width: 90%; height: auto; float: left; color:#4B4B4B; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.7; margin-top: 30px; margin-bottom:30px;}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/*compartilha*/
.corpo_compratilha{width: 80%; height: auto; float: left; margin-bottom: 20px; margin-left: 10%;}
.centraliza_redes{width: 100%; height: auto; float: left; justify-content: center; align-items: center; display: flex;}
.titulo_compartilha{width: 100%; height: auto; float: left; text-align: center; color: #1a2a3a; text-transform: uppercase; margin-bottom: 5px;}
.rede{width: 40px; height: 40px; float: left; margin-left: 2px; margin-right: 2px; border-radius: 3px;}
.rede:hover{opacity: 0.8; transition: all 0.5s ease-in;}

.x{background-image:url(../icones_redes/x.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%;}
.whatsapp{background-image:url(../icones_redes/whatsapp.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%;}
.telegram{background-image:url(../icones_redes/telegram.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%;}
.email{background-image:url(../icones_redes/email.png); -moz-background-size:100% 100%; -webkit-background-size:100% 100%;}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/*veja tbm*/
.container_ver_tambem{width:90%; height: auto; float: left; margin-left: 5%; margin-right: 0%; border: 1px solid #4B4B4B; border-radius: 10px; border-top:5px solid #1C334C; padding-bottom: 20px;}
.titulo_veja_tbm{width:100%; height: auto; float: left; color:#1C334C; font-size: 18px; font-family: Arial, Helvetica, sans-serif; text-align: center; padding-bottom: 10px; padding-top: 10px; box-shadow: 0 5px 10px -1px rgba(0, 0, 0, 0.6); margin-bottom:20px;}

#investment-card-container {max-width: 350px; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 15px rgba(0,0,0,0.1); background: #fff; margin: 20px auto;}

.card-img {width: 90%; margin-left: 5%; height: 180px; object-fit: cover; border-radius: 5px;}

.card-body {padding: 20px;}

.card-title {font-size: 1.2rem; font-weight: bold; color: #1a2a3a; margin-bottom: 10px; text-align: center;}

.btn-invest {display: block; text-align: center; background-color: #00b894; color: white; text-decoration: none; padding: 12px; border-radius: 6px; font-weight: 600; transition: background 0.3s;}

.btn-invest:hover {background-color: #00947a;}

.link_mais_investimentos{display: block; width: 70%; height: auto; text-align: center; font-size: 15px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; color: #004f99; float: left; margin-left: 15%; margin-top: 20px; border: 1px solid #004f99; padding-top: 5px; padding-bottom: 5px; border-radius: 5px;}
.link_mais_investimentos:hover{background-color: #004f99; color:#FFFFFF;}

.separacao_veja_banner{display: block; width:100%; height: 20px; float: left;}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* banners */
.banner-premium {display: flex; width: 90%; height: 220px; background: linear-gradient(135deg, #1C334C 0%, #0a1624 100%); border-radius: 15px; overflow: hidden; font-family: 'Arial', sans-serif; color: white; cursor: pointer; text-decoration: none; position: relative; margin-bottom: 10px; margin-left: 5%;}

/* Lado esquerdo: Informações */
.banner-content {flex: 1.5; padding: 20px; display: flex; flex-direction: column; justify-content: center; z-index: 3;}

.banner-content h2 {font-size: 18px; margin: 0 0 10px 0; line-height: 1.2;}

.banner-content p {font-size: 13px; color: #d1d1d1; margin: 0; line-height: 1.4;}

/* A linha azul (cian) solicitada */
.linha-destaque {width: 60px; height: 3px; background-color: #00AEEF; margin: 15px 0 10px 0;}

.link-texto {font-size: 14px; font-weight: bold;}

/* Lado direito: Imagem com Zoom */
.banner-image {flex: 1; overflow: hidden; position: relative;}

.banner-image img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease;}

/* Overlay para fundir a imagem com o fundo azul */
.banner-image::before {content: ""; position: absolute; left: 0; top: 0; width: 50%; height: 100%; background: linear-gradient(to right, #0d1a29, transparent); z-index: 2;}

/* Trigger do Efeito Hover */
.banner-premium:hover .banner-image img {transform: scale(1.2);}

.banner-premium:hover .linha-destaque {transition: 0.5s; width: 100px; }

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* indice */
.btn_opcoes_pagina{background-color: #1C334C; width: 35px; height: auto; position: fixed; right: 0; top:50%; border-radius: 5px 0px 0px 5px; padding-top:15px; padding-bottom: 15px;} 
.btn_opcoes_pagina:hover{background-color: #00947a; transition: all 1s ease-in;}
.txt_opcoes_pagina{width: 100%; height: auto; color: #FFFFFF; font-size: 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; writing-mode: sideways-lr; padding-left: 5px; margin-left: 5px;}
.icone_opcoes_pagina{width: 100%; height: auto; color: #FFFFFF; font-size: 15px; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif;  padding-left: 5px; margin-left: 5px;}   

.container_menu_opcoes{display: none; background-color: #EEECE5; width:60%; height: 100%; position: fixed; z-index: 95; right: 0; box-shadow: -10px 0px 10px -5px rgba(0, 0, 0, 0.5); overflow: auto;}
.titulo_menu_opcoes{background-color: #1C334C; width:79%; height: auto; float: left; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 18px; text-transform: uppercase; padding-bottom: 15px; padding-top: 15px; padding-left: 6%; margin-bottom: 20px; box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.6);}

.linK_menu_opcoes{width:80%; height: auto; float: left; font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #1C334C; margin-top: 20px; margin-bottom: 20px; cursor: pointer; margin-left:10%;}
.linK_menu_opcoes:hover{color:#0276e2; transition: all 0.5s ease-in;}

.btn_fechar_menu_opcoes{background-color: #244568; width:15%; height: auto; float: left; text-align: center; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 18px; padding-bottom: 15px; padding-top: 15px; box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.6); cursor: pointer;}
.btn_fechar_menu_opcoes:hover{background-color: #2e4f74; color:#FFFFFF; transition: all 0.5s ease-in;}

html {scroll-behavior: smooth;}

.final_container_menu_opcoes{background-color: #1C334C; width: 100%; height: 30px; float: left; margin-top: 10px;}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/*anuncio rpupas north*/
.anuncio_loja_north{background-image:url(../anuncio_loja_north/1.gif); -moz-background-size:100% 100%; -webkit-background-size:100% 100%; display: block; width:90%; height: 400px; float: left; border-radius: 10px; margin-left: 5%;}
.anuncio_loja_north:hover{opacity: 0.8; scale: 1.02; transition: all 0.5s ease-in;}