/* Button Styles */
button.cssREDbutton {
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    width: 100%;
    height: 75px;
    padding: 10px;
    background-image: linear-gradient(to right, #851515, #9a1415, #b01114, #c50e11, #db090d, #dc080b, #dc070a, #dd0608, #c9090b, #b60b0d, #a30d0e, #900e0e);
    border-radius: 10px;
    border: 2px solid #F80202;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.7), inset 0px 0px 3px rgba(0,0,0,0.6);
    text-shadow: 0px -1px 0px rgba(0,0,0,0), 0px 1px 0px rgba(255,255,255,0);
}
button.cssREDbutton:hover {
    background-image: linear-gradient(to right, #bd0a0a, #b80b0b, #b30b0b, #ae0c0c, #a90c0c, #aa0b0c, #ac0b0b, #ad0a0b, #b50809, #bd0607, #c50304, #cd0101);
    border: 2px solid #E55050;
}
button.cssBLUEbutton {
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    width: 100%;
    height: 75px;
    padding: 10px;
    background-image: linear-gradient(to right, #185e8d, #1176a6, #038fbd, #00a9d4, #00c3e8, #00c3e8, #00c3e8, #00c3e8, #00a9d4, #038fbd, #1176a6, #185e8d);
    border-radius: 10px;
    border: 2px solid #0B81F1;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.7), inset 0px 0px 3px rgba(0,0,0,0.6);
    text-shadow: 0px -1px 0px rgba(0,0,0,0), 0px 1px 0px rgba(255,255,255,0);
}
button.cssBLUEbutton:hover {
    background-image: linear-gradient(to right, #01e7ff, #00ccee, #00b1db, #0097c5, #037eae, #037eae, #037eae, #037eae, #0097c5, #00b1db, #00ccee, #01e7ff);
    border: 2px solid #00B5F8;
}
button.cssGREENbutton {
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    width: 100%;
    height: 75px;
    padding: 10px;
    background-image: linear-gradient(to right, #076a0d, #1f7e1a, #319327, #43a933, #54bf40, #54bf41, #54c042, #54c043, #43ab39, #32962f, #218125, #0d6d1b);
    border-radius: 10px;
    border: 2px solid #1B922C;
    box-shadow: 0px 0px 7px rgba(0,0,0,0.7), inset 0px 0px 3px rgba(0,0,0,0.6);
    text-shadow: 0px -1px 0px rgba(0,0,0,0), 0px 1px 0px rgba(255,255,255,0);
}
button.cssGREENbutton:hover {
    background-image: linear-gradient(to right, #6cdd51, #5ac747, #49b23c, #389d32, #278828, #278828, #278828, #278828, #389d32, #49b23c, #5ac747, #6cdd51);
    border: 2px solid #6CDD51;
}

/* Responsive Media Queries */
@media (max-width: 576px) {
    .BOXLogoClick3W { position: relative; width: 70%; }
    .BOXSolu { position: relative; width: 60%; }
}
@media (min-width: 577px) and (max-width: 768px) {
    .BOXLogoClick3W { position: relative; width: 60%; }
    .BOXSolu { position: relative; width: 50%; }
}
@media (min-width: 769px) {
    .BOXLogoClick3W { position: relative; width: 250px; }
    .BOXSolu { position: relative; width: 200px; }
}

/* WhatsApp Float */
.whatsfloattt {
    position: fixed;
    width: 70px;
    height: 70px;
    bottom: 155px;
    right: 20px;
    background-image: url(../imagens/whatsappmini50x50.png);
    background-repeat: no-repeat;
}
.my-whatsfloattt { margin-top: 0px; }
.JustificarTexto { text-align: justify; text-justify: inter-word; }

/* Menu and Font Controls */
.menu-bar {
    background-image: linear-gradient(to bottom, #5d5d5d, #656565, #6d6d6d, #767676, #7e7e7e, #7c7c7c, #797979, #777777, #696969, #5b5b5b, #4d4d4d, #404040);
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: white;
}
.font-controls {
    position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 1001;
}
.font-btn {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.menu-controls { margin-left: 20px; }
.btn-primary {
    background-color: #4285f4;
    border: none;
}
.btn-primary:hover {
    background-color: #3367d6;
}
.theme-controls {
    position: fixed;
    bottom: 200px;
    right: 20px;
    z-index: 1001;
}

/* Section Styles */
section {
    padding: 60px 0;
    min-height: 50vh;
}
#intro { background-image: linear-gradient(to right top, #230088, #0055c9, #0090ec, #00c9f9, #00fffd); }
#location { background-image: linear-gradient(to right top, #a2a2a2, #b8b8b8, #c4c4c4, #d0d0d0, #dcdcdc); }
#beneficios { background-image: linear-gradient(to right top, #626262, #777777, #8c8c8c, #a2a2a2, #b8b8b8); }
#reels { background-image: linear-gradient(to right top, #4f1d1d, #5a1c1c, #651b1b, #6f1a1a, #7a1818, #821616, #8b1314, #931011, #9b0d0e, #a3090a, #aa0405, #b20000); }
#map { background-image: linear-gradient(to right top, #a2a2a2, #b8b8b8, #c4c4c4, #d0d0d0, #dcdcdc); }
#obras { background-image: linear-gradient(to right top, #626262, #777777, #8c8c8c, #a2a2a2, #b8b8b8); }
#youtube { background-image: linear-gradient(to right top, #4f1d1d, #5a1c1c, #651b1b, #6f1a1a, #7a1818, #821616, #8b1314, #931011, #9b0d0e, #a3090a, #aa0405, #b20000); }
#sobre { background-image: linear-gradient(to right top, #230088, #0055c9, #0090ec, #00c9f9, #00fffd); }
#performance { background-image: linear-gradient(to right top, #626262, #777777, #8c8c8c, #a2a2a2, #b8b8b8); }
#faixa_click3w {    background: linear-gradient(rgb(111, 55, 0), rgb(140, 78, 1), rgb(168, 103, 2), rgb(196, 129, 1), rgb(222, 157, 0), rgb(222, 157, 0), rgb(222, 157, 0), rgb(222, 157, 0), rgb(196, 129, 1), rgb(168, 103, 2), rgb(140, 78, 1), rgb(111, 55, 0)); }

/* Location and Beneficios Styles */
.location-content, .beneficios-container { display: flex; gap: 40px; align-items: flex-start; }
.location-text, .beneficios-grid { flex: 1; }
.location-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.location-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 20px;
	width:300px;
	height:100px;
    cursor: pointer;
    font-size: 20px;
    transition: background-color 0.3s;
}
.location-button:hover { background-color: #3367d6; }
.map-container { width: 100%; height: 400px; margin: 20px 0; }
iframe { width: 100%; height: 100%; border: 0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.info { text-align: center; color: #555; }
.banco-logo { text-align: center; margin: 20px 0; }
.banco-logo img { max-width: 200px; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
@media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } }
.card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.card-img-top { width: 100%; object-fit: cover; }
.card-body { padding: 15px; }
.card-title { font-size: 1.25rem; }
.card-text { font-size: 1rem; }
.shadow-lg { box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important; }

/* Gallery Styles */
.gallery-item { position: relative; }
.gallery img { width: 100%; height: 300px; object-fit: cover; border: 5px solid #fff; border-radius: 10px; transition: all 0.3s ease; }
.gallery img:hover { transform: scale(1.03); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.gallery-item:hover .overlay { opacity: 1; }
.caption { margin: 0; font-size: 1.1rem; }
.modal-dialog { max-width: 90%; margin: 1.75rem auto; }
.modal-content img { width: 100%; height: auto; }

/* Modal Styles */
.legend-button { background-color: #4285f4; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.3s; margin: 10px auto; display: block; }
.legend-button:hover { background-color: #3367d6; }
.modal-content { border-radius: 12px; border: none; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.modal-header { background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%); color: white; border-top-left-radius: 12px; border-top-right-radius: 12px; }
.modal-title { font-weight: 600; }
.modal-body { padding: 20px; background-color: #f8f9fa; }
.legend { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #333; }
.legend-color { width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* Optimization */
img, video { loading: lazy; }

/* Body and Container Styles */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-image: linear-gradient(to right top, #230088, #0055c9, #0090ec, #00c9f9, #00fffd), linear-gradient(to right, #7d8ffa, #7188f2, #6581ea, #587be3, #4a74db, #4a74db, #4a74db, #4a74db, #587be3, #6581ea, #7188f2, #7d8ffa);
    background-blend-mode: overlay;
    color: #000;
}

.beneficios-container {
    padding: 60px 20px;
    max-width: 1100px;
    margin: 50px auto;
    border-radius: 20px;
    text-align: center;
}

/* Titles and Subtitles */
.beneficios-titulo {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.beneficios-subtitulo {
    font-size: 1.1rem;
    color: #e3e3ff;
    margin-bottom: 40px;
}

/* Grid and Boxes */
.beneficios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}
.beneficio-box {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    padding: 25px;
	margin: 20px 20px 20px 20px ;
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
    transition: all 0.4s ease;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    opacity: calc(0.7 + (0.3 * var(--rand-opacity, 1)));
    animation: fadeIn 1s ease forwards;
}
.beneficio-box:hover {
    transform: translateY(-8px) scale(1.03);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 30px rgba(0, 255, 255, 0.3);
}
.beneficio-box h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: #ffffff;
}
.beneficio-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.beneficio-box li {
    margin: 6px 0;
    line-height: 1.4em;
    color: #f1f1f1;
    font-size: 0.95rem;
}
.destaque {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 10px 35px rgba(255,255,255,0.25);
}

/* CTA Area */
.cta-area {
    margin-top: 60px;
    background: rgba(255,255,255,0.15);
    color: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(255,255,255,0.3);
}
.btn-visita {
    margin-top: 20px;
    background: #fff;
    color: #0044ff;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    padding: 12px 30px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-visita:hover {
    background: #d4f1ff;
    transform: scale(1.1);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
    .beneficios-titulo { font-size: 1.8rem; }
}