/* Falha ao minimizar. Retornando o conteúdo não minimizado. (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (62,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (110,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-color' (111,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-bg' (112,24): run-time error CSS1039: Token not allowed after unary operator: '-third' (141,22): run-time error CSS1039: Token not allowed after unary operator: '-gray' (165,46): run-time error CSS1039: Token not allowed after unary operator: '-primary' (165,62): run-time error CSS1039: Token not allowed after unary operator: '-third' (167,38): run-time error CSS1039: Token not allowed after unary operator: '-bs-third-rgb' (181,17): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (245,25): run-time error CSS1039: Token not allowed after unary operator: '-primary' (306,17): run-time error CSS1039: Token not allowed after unary operator: '-text-menu' (327,33): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (358,17): run-time error CSS1039: Token not allowed after unary operator: '-text-menu' (362,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (363,32): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-hover-bg' (367,21): run-time error CSS1039: Token not allowed after unary operator: '-text-menu' (369,32): run-time error CSS1039: Token not allowed after unary operator: '-bs-gray-100' (396,21): run-time error CSS1039: Token not allowed after unary operator: '-text-menu' (456,25): run-time error CSS1039: Token not allowed after unary operator: '-text-menu' (458,36): run-time error CSS1039: Token not allowed after unary operator: '-bs-gray-100' (476,30): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (483,32): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (540,32): run-time error CSS1039: Token not allowed after unary operator: '-dark' (541,33): run-time error CSS1039: Token not allowed after unary operator: '-dark' (676,29): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-item-padding-x' (678,23): run-time error CSS1039: Token not allowed after unary operator: '-bs-breadcrumb-divider' (696,26): run-time error CSS1039: Token not allowed after unary operator: '-light' (700,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (726,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (747,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (762,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (832,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (861,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (865,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (867,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (888,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (905,25): run-time error CSS1039: Token not allowed after unary operator: '-primary' (930,41): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (941,36): run-time error CSS1039: Token not allowed after unary operator: '-primary' (952,34): run-time error CSS1039: Token not allowed after unary operator: '-third' (969,47): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (981,34): run-time error CSS1039: Token not allowed after unary operator: '-third' (1000,29): run-time error CSS1039: Token not allowed after unary operator: '-light' (1001,34): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1007,33): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1008,38): run-time error CSS1039: Token not allowed after unary operator: '-gray' (1058,34): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1059,36): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1122,40): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1150,33): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1200,34): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1256,30): run-time error CSS1039: Token not allowed after unary operator: '-third' (1293,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1294,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1331,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1338,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1375,34): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1521,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1525,37): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1584,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1598,25): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary' (1606,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1636,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1714,29): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (1715,36): run-time error CSS1039: Token not allowed after unary operator: '-light' (1725,29): run-time error CSS1039: Token not allowed after unary operator: '-light' (1729,32): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (1736,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1765,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1766,26): run-time error CSS1039: Token not allowed after unary operator: '-bs-black-rgb' (1766,47): run-time error CSS1039: Token not allowed after unary operator: '-bs-text-opacity' (1775,32): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1779,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1780,37): run-time error CSS1039: Token not allowed after unary operator: '-grayRgb' (1784,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1785,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-third-rgb' (1790,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-third-rgb' (1794,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1795,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (1799,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1801,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-secondary-rgb' (1805,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1807,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-third-rgb' (1811,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1813,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-fourth-rgb' (1823,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (1828,21): run-time error CSS1039: Token not allowed after unary operator: '-third' (1833,21): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (1843,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1845,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-third-rgb' (1865,26): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (1872,28): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (1891,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1983,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1984,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1994,25): run-time error CSS1039: Token not allowed after unary operator: '-pg-size' (1995,26): run-time error CSS1039: Token not allowed after unary operator: '-pg-size' (1999,33): run-time error CSS1039: Token not allowed after unary operator: '-pg-radius' (2000,41): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (2002,25): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (2011,39): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (2012,41): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (2013,29): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (2018,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2019,32): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2046,13): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2088,50): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2088,66): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2090,42): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (2109,46): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (2110,54): run-time error CSS1039: Token not allowed after unary operator: '-third' (2110,68): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2119,45): run-time error CSS1039: Token not allowed after unary operator: '-bs-primary-rgb' (2135,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (2147,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2160,25): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2173,36): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2190,33): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2197,31): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-font-family' (2315,29): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2322,40): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2331,29): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2348,40): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2349,36): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2390,29): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2391,36): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2495,42): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2507,33): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2641,43): run-time error CSS1019: Unexpected token, found ' ' (2641,43): run-time error CSS1019: Unexpected token, found ' ' (2641,43): run-time error CSS1042: Expected function, found ' ' (2641,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' ' (2757,40): run-time error CSS1046: Expect comma, found '0' (2757,44): run-time error CSS1046: Expect comma, found '/' (2765,25): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (2772,25): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (2778,31): run-time error CSS1039: Token not allowed after unary operator: '-fourth' (3253,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3261,34): run-time error CSS1039: Token not allowed after unary operator: '-dark' (3526,36): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3641,21): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3660,29): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3695,40): run-time error CSS1039: Token not allowed after unary operator: '-third' (3696,40): run-time error CSS1039: Token not allowed after unary operator: '-third' (4085,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' (4093,26): run-time error CSS1039: Token not allowed after unary operator: '-secondary' (4100,26): run-time error CSS1039: Token not allowed after unary operator: '-primary' */ /********** Template CSS **********/ /*cor 1- #FF6F0F cor 2 - #e58334 cor 3-  #c75818 cor 4-   #3f1309*/ :root { --primary: #FF6F0F; --secondary: #e58334; --third: #c75818; --fourth: #3f1309; --light: #F8F8F9; --dark: #001D23; --bs-primary-rgb: 255,111,15; --bs-secondary-rgb: 229,131,52; --bs-third-rgb: 199,88,24; --bs-fourth-rgb: 63,19,9; --text-menu: #696E77; --gray: #F0F0F0; --grayRgb: 240,240,240; } .btn-outline-primary { --bs-btn-color: #c75818; --bs-btn-border-color: #c75818; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c75818; --bs-btn-hover-border-color: #c75818; --bs-btn-focus-shadow-rgb: 13, 110, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #c75818; --bs-btn-active-border-color: #c75818; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #c75818; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #c75818; --bs-gradient: none; } .btn-outline-secondary { --bs-btn-color: #FF6F0F; --bs-btn-border-color: #FF6F0F; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #FF6F0F; --bs-btn-hover-border-color: #FF6F0F; --bs-btn-focus-shadow-rgb: 108, 117, 125; --bs-btn-active-color: #fff; --bs-btn-active-bg: #FF6F0F; --bs-btn-active-border-color: #FF6F0F; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #FF6F0F; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #FF6F0F; --bs-gradient: none; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #c75818; --bs-btn-border-color: #c75818; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c75818; --bs-btn-hover-border-color: #c75818; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #c75818; --bs-btn-active-border-color: #c75818; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #c75818; --bs-btn-disabled-border-color: #c75818; } html { scroll-behavior: smooth; overflow-x: hidden; } a { color: #FF6F0F; text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; color: #2a2a2a; font-weight: 700; } ul { margin-bottom: 0px; } .text-justify{ text-align:justify; } .back-to-top { position: fixed; display: none; right: 1.5em; bottom: 75px; z-index: 99; } .form-control:focus { color: var(--bs-body-color) !important; background-color: var(--bs-body-bg) !important; border-color: var(--third) !important; outline: 0 !important; box-shadow: 0 0 0 0.25rem rgba(199,88,24, 0.25) !important; } .form-select:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgba(199,88,24, 0.25); } .form-check-input:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgba(199,88,24, 0.25); } .header-carousel .owl-carousel-item img { width: 660px; /* largura fixa */ height: 660px; /* altura fixa */ object-fit: cover; /* mantém a proporção e corta excesso se necessário */ display: block; } /* Form Toggle */ .toggle-wrap { background: var(--gray); border-radius: 999px; padding: 6px; position: relative; box-shadow: 0 6px 18px rgba(0,0,0,0.08); user-select: none; display: block; /* não vira flex */ width: fit-content; /* mantém o tamanho original */ margin: 0 auto 2em auto; /* centraliza + margem inferior */ } /* Se quiser garantir que o bloco fique centralizado sempre */ .toggle-wrap { justify-content: center; /* mantém o conteúdo alinhado */ } /* indicador deslizante */ .toggle-indicator { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); background: linear-gradient(180deg, var(--primary), var(--third)); border-radius: 999px; box-shadow: 0 8px 20px rgba(var(--bs-third-rgb), 0.18); transition: transform 260ms cubic-bezier(.2,.9,.3,1); z-index: 0; } /* botões */ .toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--fourth); z-index: 1; position: relative; transition: color 150ms ease; min-width: 180px; box-sizing: border-box; } .toggle-btn.active { color: white; } .toggle-wrap.left-active .toggle-indicator { transform: translateX(0); } .toggle-wrap.right-active .toggle-indicator { transform: translateX(100%); } .toggle-wrap.left-active .btn-left { color: white; } .toggle-wrap.right-active .btn-right { color: white; } @media (max-width: 420px) { .toggle-btn { padding: 10px 14px; min-width: 120px; font-size: 14px; } } /*** Spinner ***/ #spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; } #spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; } /*** Button ***/ .btn { font-weight: 500; transition: .5s; } .btn.btn-primary, .btn.btn-outline-primary:hover { color: #FFFFFF; } .btn.btn-primary:hover { color: var(--primary); background: transparent; } .btn-square { width: 38px; height: 38px; } .btn-sm-square { width: 32px; height: 32px; } .btn-lg-square { width: 35px; height: 35px; } .btn-square, .btn-sm-square, .btn-lg-square { padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal; } /*** Navbar ***/ .fixed-top { transition: .5s; } .top-bar { height: 45px; border-bottom: 1px solid rgba(255, 255, 255, .07); } .top-bar::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.01); pointer-events: none; z-index: -1; /* fica atrás do conteúdo do footer */ } .navbar .dropdown-toggle::after { border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; vertical-align: middle; margin-left: 8px; } .navbar .navbar-nav .nav-link { margin-right: 30px; padding: 25px 0; color: var(--text-menu); font-family: "Poppins", Sans-serif; font-weight: 400; font-size: 16px; outline: none; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: #C75000; } /* Menu Mobile */ .toggler-icon { display: block; width: 24px; height: 3px; margin: 5px auto; background-color: rgba(var(--bs-primary-rgb), 1); transition: all 0.3s ease-in-out; border-radius: 2px; } .navbar-toggler.collapsed .top-bar { transform: rotate(0) translate(0, 0); } .navbar-toggler.collapsed .middle-bar { opacity: 1; } .navbar-toggler.collapsed .bottom-bar { transform: rotate(0) translate(0, 0); } .navbar-toggler .top-bar { transform: rotate(45deg) translate(5px, 5px); } .navbar-toggler .middle-bar { opacity: 0; } .navbar-toggler .bottom-bar { transform: rotate(-45deg) translate(6px, -6px); } .dropdown-item { color: var(--text-menu) !important; } .dropdown-item:hover, .dropdown-item:focus { color: var(--primary) !important; background-color: var(--bs-dropdown-link-hover-bg) !important; } .dropdown-item.active, .dropdown-item:active { color: var(--text-menu) !important; text-decoration: none !important; background-color: var(--bs-gray-100) !important; } @media (min-width: 992px) { .navbar .nav-item .dropdown-menu { display: block; visibility: hidden; top: 100%; transform: rotateX(-75deg); transform-origin: 0% 0%; transition: .5s; opacity: 0; } .navbar .nav-item:hover .dropdown-menu { transform: rotateX(0deg); visibility: visible; transition: .5s; opacity: 1; } } @media (max-width: 1500px) { .navbar .navbar-nav .nav-link { margin-right: 15px; padding: 25px 0; color: var(--text-menu); font-family: "Poppins", Sans-serif; font-weight: 400; font-size: 14px; outline: none; } .logo-topo span { font-size: 1.2em!important; } .top-bar .col-lg-9, .top-bar .col-lg-3 { padding-left: 20px !important; padding-right: 20px !important; } .top-bar small { font-size: 12px; white-space: nowrap; } .top-bar small.ms-4 { margin-left: 12px !important; } .top-bar .col-lg-3 { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .top-bar .col-lg-3 small { margin-right: 6px; } .top-bar i { font-size: 12px; } } @media (max-width: 1366px) { .logo-topo img.logoMenu { height: 72px !important; } .navbar .navbar-nav .nav-link { margin-right: 10px !important; font-size: 12.5px !important; } } @media (max-width: 991.98px) { .navbar .navbar-nav { margin-top: 10px; border-top: 1px solid rgba(0, 0, 0, .07); color: var(--text-menu) !important; text-decoration: none !important; background-color: var(--bs-gray-100) !important; } .navbar .navbar-nav .nav-link { padding: 10px 0; } .navbar-dark, .navbar[data-bs-theme=dark] { } .logoMenu { height: 75px !important; margin: 0px !important; } .btn-backtop { color: #fff; background: var(--fourth); margin-bottom: 45px !important; } .btn.btn-backtop:hover { color: #fff; background: transparent; border-color: var(--fourth); } } /*** Header ***/ .carousel-caption { top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(0, 29, 35, .6); z-index: 1; } .logo-topo { display: flex; } .logo-topo span { font-size: 1.4em; color: #e85602; } @media (max-width: 768px) { .logo-topo span { font-size: 1.1em; } } @media (max-width: 420px) { .logo-topo span { font-size: 1em; } .logoMenu { height: 60px !important; margin: 0px !important; } } .carousel-control-prev, .carousel-control-next { width: 15%; } .carousel-control-prev-icon, .carousel-control-next-icon { width: 3rem; height: 3rem; background-color: var(--dark); border: 12px solid var(--dark); border-radius: 3rem; } @media (max-width: 768px) { #header-carousel .carousel-item { position: relative; min-height: 450px; } #header-carousel .carousel-item img { position: absolute; width: 100%; height: 100%; object-fit: cover; } } .page-cct { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_cct.png) center center no-repeat; background-size: cover; } .page-noticias { padding-top: 17rem; padding-bottom: 7rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_noticias.png) center center no-repeat; background-size: cover; } .page-boletim { padding-top: 17rem; padding-bottom: 7rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_boletim.png) center center no-repeat; background-size: cover; } .page-jornais { padding-top: 17rem; padding-bottom: 7rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_jornais.png) center center no-repeat; background-size: cover; } .page-acaoSindical { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_acaosindical.png) center center no-repeat; background-size: cover; background-position: top; } .page-juridico { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_juridico.png) center center no-repeat; background-size: cover; } .page-sobre { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_sobre.png) center center no-repeat; background-size: cover; } .page-representacao { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_representacao.png) center center no-repeat; background-size: cover; } .page-informacoes { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/blog/blog-recent-1.jpg) center center no-repeat; background-size: cover; } .page-equipe { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/equipe/team-1.jpg) center center no-repeat; background-size: cover; } .page-beneficios { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/heading/banner_beneficios.png) center center no-repeat; background-size: cover; } .page-quemsomos { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/sobre/about-1.jpg) center center no-repeat; background-size: cover; } .page-quemsomos .breadcrumb-item + .breadcrumb-item::before { color: #999999; } .page-header-standard { padding-top: 12rem; padding-bottom: 6rem; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: linear-gradient(rgba(0,29,35,.8), rgba(0,29,35,.8)); /* overlay base */ } .page-header { padding-top: 12rem; padding-bottom: 6rem; background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)), url(../img/carrossel/carousel-1.jpg) center center no-repeat; background-size: cover; } .page-header .breadcrumb-item + .breadcrumb-item::before { color: #999999; } .breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: var(--bs-breadcrumb-item-padding-x); color: #fff !important; content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */; } .title_gallery { width: 60%; margin: 0 auto; } /*-------------------------------------------------------------- # Facts --------------------------------------------------------------*/ .facts { position: relative; margin: 6rem 0; background: var(--light); } .facts .border { border-color: rgba(var(--bs-primary-rgb), .4) !important; } /*-------------------------------------------------------------- # Facts --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Features VIDEO --------------------------------------------------------------*/ .btn-play { position: absolute; top: 50%; right: -30px; transform: translateY(-50%); display: block; box-sizing: content-box; width: 16px; height: 26px; border-radius: 100%; border: none; outline: none !important; padding: 18px 20px 20px 28px; background: var(--primary); } @media (max-width: 992px) { .btn-play { left: 50%; right: auto; transform: translate(-50%, -50%); } } .btn-play:before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: var(--primary); border-radius: 100%; animation: pulse-border 1500ms ease-out infinite; } .btn-play:after { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: var(--primary); border-radius: 100%; transition: all 200ms; } .btn-play span { display: block; position: relative; z-index: 3; width: 0; height: 0; left: -1px; border-left: 16px solid #FFFFFF; border-top: 11px solid transparent; border-bottom: 11px solid transparent; } @keyframes pulse-border { 0% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(2); opacity: 0; } } .modal-video .modal-dialog { position: relative; max-width: 800px; margin: 60px auto 0 auto; } .modal-video .modal-body { position: relative; padding: 0px; } .modal-video .close { position: absolute; width: 30px; height: 30px; right: 0px; top: -30px; z-index: 999; font-size: 30px; font-weight: normal; color: #FFFFFF; background: #000000; opacity: 1; } /*-------------------------------------------------------------- # Features VIDEO --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Features Section --------------------------------------------------------------*/ .features .nav-tabs { border: 0; } .features .nav-link { padding: 15px 0; transition: 0.3s; color: var(--secondary); border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 100%; border: 0; border-bottom: 4px solid #e2e4e6; } .features .nav-link i { padding-right: 15px; font-size: 48px; } .features .nav-link h4 { font-size: 18px; font-weight: 600; margin: 0; } @media (max-width: 575px) { .features .nav-link h4 { font-size: 16px; } } .features .nav-link:hover { color: var(--primary); } .features .nav-link.active { color: var(--primary); background-color: transparent; border-color: var(--primary); } .features .tab-content { margin-top: 30px; } .features .tab-pane h3 { font-weight: 700; font-size: 32px; position: relative; margin-bottom: 20px; padding-bottom: 20px; } .features .tab-pane h3:after { content: ""; position: absolute; display: block; width: 60px; height: 3px; background: var(--primary); left: 0; bottom: 0; } .features .tab-pane ul { list-style: none; padding: 0; } .features .tab-pane ul li { padding-top: 10px; } .features .tab-pane ul i { font-size: 20px; padding-right: 4px; color: var(--primary); } .features .tab-pane p:last-child { margin-bottom: 0; } /*-------------------------------------------------------------- # ROADMAP --------------------------------------------------------------*/ /*** Roadmap ***/ .roadmap-carousel { position: relative; } .roadmap-carousel::before { position: absolute; content: ""; height: 0; width: 100%; top: 20px; left: 0; border-top: 2px dashed var(--secondary); } .roadmap-carousel .roadmap-item .roadmap-point { position: absolute; width: 30px; height: 30px; top: 6px; left: 50%; margin-left: -15px; background: #FFFFFF; border: 2px solid var(--primary); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; } .roadmap-carousel .roadmap-item .roadmap-point span { display: block; width: 18px; height: 18px; background: var(--third); } .roadmap-carousel .roadmap-item { position: relative; padding-top: 150px; text-align: center; } .roadmap-carousel .roadmap-item::before { position: absolute; content: ""; width: 0; height: 115px; top: 0; left: 50%; transform: translateX(-50%); border-right: 2px dashed var(--secondary); } .roadmap-carousel .roadmap-item::after { position: absolute; content: ""; width: 14px; height: 14px; top: 111px; left: 50%; margin-left: -7px; transform: rotate(45deg); background: var(--third); } .roadmap-carousel .owl-nav { margin-top: 40px; display: flex; justify-content: center; } .roadmap-carousel .owl-nav .owl-prev, .roadmap-carousel .owl-nav .owl-next { margin: 0 12px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50px; font-size: 22px; color: var(--light); background: var(--secondary); transition: .5s; } .roadmap-carousel .owl-nav .owl-prev:hover, .roadmap-carousel .owl-nav .owl-next:hover { color: var(--primary); background: var(--gray); } /*-------------------------------------------------------------- # ROADMAP --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Our Projects Section --------------------------------------------------------------*/ /* ===== FILTRO BENEFÍCIOS (chips) ===== */ .projects .portfolio-flters { list-style: none; margin: 0 0 16px 0; padding: 8px 0; display: flex; flex-wrap: wrap; /* desktop: quebra em várias linhas */ gap: 10px; justify-content: center; /* centraliza no desktop */ } .projects .portfolio-flters li { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 10px 14px; font-size: 15px; font-weight: 600; line-height: 1; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; background: #fff; color: #222; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; margin: 0; } .projects .portfolio-flters li:hover { transform: translateY(-1px); } .projects .portfolio-flters li.filter-active, .projects .portfolio-flters li:hover { background: var(--primary); /* #FF6F0F */ border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(255,111,15,.25); } .projects .portfolio-flters li:active { transform: scale(.98); } /* ===== MOBILE/TABLET: vira trilho rolável ===== */ @media (max-width: 992px) { .projects .portfolio-flters { flex-wrap: nowrap; /* não quebra linha */ justify-content: flex-start; /* alinha à esquerda */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 8px 12px; background: #fff; border-radius: 12px; scrollbar-width: none; /* Firefox */ } .projects .portfolio-flters::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .projects .portfolio-flters li { scroll-snap-align: start; font-size: 14px; } } /* ===== CARDS DE BENEFÍCIOS ===== */ .projects .portfolio-content { position: relative; overflow: hidden; box-shadow: 0px 20px 20px rgba(82, 86, 94, 0.6); border-radius: 10px; } .projects .portfolio-content img { transition: 0.3s; object-fit: cover; } .projects .portfolio-content .portfolio-info { opacity: 0; position: absolute; inset: 0; z-index: 3; transition: all ease-in-out 0.3s; background: rgba(0, 0, 0, 0.6); padding: 15px; } .projects .portfolio-content .portfolio-info h3 { font-size: 14px; padding: 5px 10px; font-weight: 400; color: #fff; display: inline-block; background-color: var(--primary); } .projects .portfolio-content .portfolio-info p { position: absolute; bottom: 10px; text-align: center; display: inline-block; left: 0; right: 0; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.8); } .projects .portfolio-content .portfolio-info .preview-link, .projects .portfolio-content .portfolio-info .details-link { position: absolute; left: calc(50% - 40px); font-size: 26px; top: calc(50% - 14px); color: #fff; transition: 0.3s; line-height: 1.2; } .projects .portfolio-content .portfolio-info .preview-link:hover, .projects .portfolio-content .portfolio-info .details-link:hover { color: var(--primary); } .projects .portfolio-content .portfolio-info .details-link { left: 50%; font-size: 34px; line-height: 0; } .projects .portfolio-content:hover .portfolio-info { opacity: 1; } .projects .portfolio-content:hover img { transform: scale(1.1); } /*-------------------------------------------------------------- # Our Projects Section --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Causes --------------------------------------------------------------*/ .causes-item .progress { height: 5px; border-radius: 0; overflow: visible; } .causes-item .progress .progress-bar { position: relative; overflow: visible; width: 0px; border-radius: 0; transition: 5s; } .causes-item .progress .progress-bar span { position: absolute; top: -7px; right: 0; width: 40px; height: 19px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--primary); color: #FFFFFF; } .causes-item .causes-overlay { position: absolute; width: 100%; height: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); overflow: hidden; opacity: 0; transition: .5s; } .causes-item:hover .causes-overlay { height: 100%; opacity: 1; } /*-------------------------------------------------------------- # Causes --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Service --------------------------------------------------------------*/ /*.service-item { box-shadow: 0 0 45px rgba(0, 0, 0, .06); } */ /*** Service ***/ .service-item { position: relative; height: 300px; padding: 0 15px; background: rgba(255, 255, 255, .8) !important; border-radius: 15px !important; box-shadow: 10px 7px 10px rgba(0, 0, 0, .5) !important; transition: 0.3s !important; } .service-item .service-icon { margin-bottom: 30px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--third); border-radius: 2px; transform: rotate(-45deg); } .service-item .service-icon i { transform: rotate(45deg); } .service-item a.btn { position: absolute; width: 60px; bottom: -48px; left: 50%; margin-left: -30px; opacity: 0; } .service-item:hover a.btn { bottom: -24px; opacity: 1; } /*-------------------------------------------------------------- # Service --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Donate --------------------------------------------------------------*/ .donate { background: rgba(0, 29, 35, .8); } .btn-group .btn-light:hover, .btn-group input[type="radio"]:checked + label { color: var(--primary); border-color: var(--primary); } /*** Team ***/ .team-item img { position: relative; top: 0; transition: .5s; } .team-item:hover img { top: -30px; } .team-item .team-text { position: relative; height: 100px; transition: .5s; } .team-item:hover .team-text { margin-top: -60px; height: 160px; } .team-item .team-text .team-social { opacity: 0; transition: .5s; } .team-item:hover .team-text .team-social { opacity: 1; } .team-item .team-social .btn { display: inline-flex; color: var(--primary); background: #FFFFFF; border-radius: 40px; } .team-item .team-social .btn:hover { color: #FFFFFF; background: var(--primary); } /*-------------------------------------------------------------- # Donate --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Sections & Section Header --------------------------------------------------------------*/ .testimonials { padding: 80px 0; overflow: hidden; } .section-bg { background-color: #f5f6f7; } .section-header { text-align: center; padding-bottom: 70px; } .section-header h2 { font-size: 32px; font-weight: 700; position: relative; color: #2e3135; } .section-header h2:before, .section-header h2:after { content: ""; width: 50px; height: 2px; background: var(--primary); display: inline-block; } .section-header h2:before { margin: 0 15px 10px 0; } .section-header h2:after { margin: 0 0 10px 15px; } .section-header p { margin: 0 auto 0 auto; } .text-brand-contrast { color: #FF6F0F; font-weight: 600; text-decoration: none; } @media (min-width: 1199px) { .section-header p { max-width: 60%; } } /*-------------------------------------------------------------- # Testimonials Section --------------------------------------------------------------*/ .testimonials .testimonial-wrap { padding-left: 50px; } .testimonials .testimonials-carousel, .testimonials .testimonials-slider { overflow: hidden; } .testimonials .testimonial-item { box-sizing: content-box; padding: 30px 30px 30px 60px; margin: 0 15px 30px 0; min-height: 260px; box-shadow: 0px 20px 20px rgba(82, 86, 94, 0.6); position: relative; background: #fff; } .testimonials .testimonial-item .testimonial-img { width: 90px; border-radius: 50%; border: 6px solid #fff; position: absolute; left: -45px; } .testimonials .testimonial-item h3 { font-size: 18px; font-weight: bold; margin: 10px 0 5px 0; color: #000; } .testimonials .testimonial-item h4 { font-size: 14px; color: #999; margin: 0; } .testimonials .testimonial-item .stars { margin: 10px 0; } .testimonials .testimonial-item .stars i { color: #ffc107; margin: 0 1px; } .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { color: #000; font-size: 26px; line-height: 0; } .testimonials .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative; } .testimonials .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1); } .testimonials .testimonial-item p { font-style: italic; margin: 15px auto 15px auto; } .testimonials .swiper-pagination { position: relative; margin-top: 24px; display: flex; justify-content: center; align-items: center; gap: 12px; z-index: 1; } .testimonials .swiper-pagination .swiper-pagination-bullet { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 16px; margin: 0; width: auto; height: auto; background: transparent; opacity: 1; outline: none; cursor: pointer; border-radius: 999px; line-height: 0; } .testimonials .swiper-pagination .swiper-pagination-bullet::before { content: ""; width: 12px; height: 12px; border-radius: 999px; display: block; background: #d5d7da; } .testimonials .swiper-pagination .swiper-pagination-bullet-active::before { background: var(--primary, #ff6f0f); } .testimonials .swiper-pagination .swiper-pagination-bullet:focus-visible { outline: 2px solid var(--primary, #ff6f0f); outline-offset: 2px; } @media (max-width: 767px) { .testimonials .testimonial-wrap { padding-left: 0; } .testimonials .testimonials-carousel, .testimonials .testimonials-slider { overflow: hidden; } .testimonials .testimonial-item { padding: 30px; margin: 15px; display: flex; flex-direction: column; align-content: center; align-items: center; flex-wrap: nowrap; } .testimonials .testimonial-item .testimonial-img { position: static; left: auto; } } @media (max-width: 480px) { .testimonials .swiper-pagination { gap: 10px; margin-top: 20px; } .testimonials .swiper-pagination .swiper-pagination-bullet { padding: 16px; } } /*-------------------------------------------------------------- # Recent Blog Posts Section --------------------------------------------------------------*/ .recent-blog-posts .post-item { box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.06); transition: 0.3s; } .recent-blog-posts .post-item .post-img img { transition: 0.5s; } .recent-blog-posts .post-item .post-date { position: absolute; right: 0; bottom: 0; background-color: var(--color-primary); color: #fff; text-transform: uppercase; font-size: 13px; padding: 6px 12px; font-weight: 500; } .recent-blog-posts .post-item .post-content { padding: 30px; } .recent-blog-posts .post-item .post-title { font-size: 24px; color: var(--color-secondary); font-weight: 700; transition: 0.3s; margin-bottom: 15px; } .recent-blog-posts .post-item .meta i { font-size: 16px; color: var(--color-primary); } .recent-blog-posts .post-item .meta span { font-size: 15px; color: #838893; } .recent-blog-posts .post-item hr { color: #888; margin: 20px 0; } .recent-blog-posts .post-item .readmore { display: flex; align-items: center; font-weight: 600; line-height: 1; transition: 0.3s; color: #838893; } .recent-blog-posts .post-item .readmore i { line-height: 0; margin-left: 6px; font-size: 16px; } .recent-blog-posts .post-item:hover .post-title, .recent-blog-posts .post-item:hover .readmore { color: var(--color-primary); } .recent-blog-posts .post-item:hover .post-img img { transform: scale(1.1); } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .footer-wave { position: relative; width: 100%; margin-bottom: -48px; line-height: 0; } .footer-wave img { width: 100%; display: block; } .footer { position: relative; isolation: isolate; /* garante stacking context só do footer */ } .footer::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.01); pointer-events: none; z-index: -1; /* fica atrás do conteúdo do footer */ } .footer .btn.btn-link { position: relative; display: block !important; width: max-content; margin-bottom: 8px; padding: 0; color: #fff !important; text-decoration: underline; line-height: 1.4; } .footer .btn.btn-link:hover, .footer .btn.btn-link:focus { color: #fffff0 !important; } .footer .btn.btn-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .footer .btn.btn-link::before { color: #ffffffcc; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 10px; } .footer .btn.btn-square { color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.8); } .footer .btn.btn-square:hover { color: var(--fourth); border-color: var(--light); } .footer .copyright { padding: 25px 0; font-size: 15px; border-top: 1px solid rgba(256, 256, 256, .1); } .footer .copyright a { color: var(--light); } .copyright { background-color: var(--fourth); height: auto; padding-top: 8px; padding-bottom: 8px; } .footer .copyright a:hover { color: var(--primary); } .footer-link { color: #ff6f0f; /* cor da marca com contraste alto */ text-decoration: underline; /* não depende só da cor */ } .footer-link:hover, .footer-link:focus { color: #ff8a3d; /* tom mais claro no hover/focus */ text-decoration-thickness: 2px; } .footer-link:focus { outline: 2px solid #ff6f0f; /* destaque visível para navegação por teclado */ outline-offset: 2px; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ /*ALTERACOES DANIEL*/ .text-sind { --bs-text-opacity: 1 !important; color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important; } .bg-headerBlog { background: linear-gradient(rgba(9, 30, 62, .7), rgba(9, 30, 62, .7)), url(../img/blog/blog1.jpg) center center no-repeat; background-size: cover; } .bg-primary { background-color: var(--primary) !important; } .bg-gray { --bs-bg-opacity: 1 !important; background-color: rgba(var(--grayRgb), 0.8) !important; } .bg-dark { --bs-bg-opacity: 1 !important; background-color: rgba(var(--bs-third-rgb), 0.8) !important; } .bg-footer { color: #fff !important; background-color: rgba(var(--bs-third-rgb), 0.9) !important; } .bg-primary { --bs-bg-opacity: 1 !important; background-color: rgba(var(--bs-primary-rgb), 0.8) !important; } .bg-secondary { --bs-bg-opacity: 1 !important; color: rgba(255, 255, 255, 0.8) !important; background-color: rgba(var(--bs-secondary-rgb), 1) !important; } .bg-third { --bs-bg-opacity: 1 !important; color: rgba(255, 255, 255, 0.8) !important; background-color: rgba(var(--bs-third-rgb), 0.8) !important; } .bg-fourth { --bs-bg-opacity: 1 !important; color: rgba(255, 255, 255, 0.8) !important; background-color: rgba(var(--bs-fourth-rgb), 0.8) !important; } .text-primary { color: #C75000 !important; } .text-secondary { color: var(--secondary) !important; } .text-third { color: var(--third) !important; } .text-fourth { color: var(--fourth) !important; } .text-white { color: #fff !important; } .text-white-menu { --bs-bg-opacity: 1 !important; color: rgba(255, 255, 255, 1) !important; background-color: rgba(var(--bs-third-rgb), 1) !important; } .text-footer { max-width: 100% !important; } .bannerFluid { margin-top: 0px !important; } @media (max-width: 991.98px) { .bannerFluid { margin-top: 100px !important; } } .btn-backtop { color: #fff; background: var(--fourth); margin-bottom: 30px; } .btn.btn-backtop:hover { color: #fff; background: transparent; border-color: var(--fourth); } .text-center { text-align: center !important; } /*** Section Title ***/ .section-title::before { position: absolute; content: ""; width: 150px; height: 5px; left: 0; bottom: 0; background: var(--primary); border-radius: 2px; } .section-title.text-center::before { left: 50%; margin-left: -75px; } .section-title.section-title-sm::before { width: 90px; height: 3px; } .section-title::after { position: absolute; content: ""; width: 6px; height: 5px; bottom: 0px; background: #FFFFFF; -webkit-animation: section-title-run 5s infinite linear; animation: section-title-run 5s infinite linear; } .section-title.section-title-sm::after { width: 4px; height: 3px; } .section-title.text-center::after { -webkit-animation: section-title-run-center 5s infinite linear; animation: section-title-run-center 5s infinite linear; } .section-title.section-title-sm::after { -webkit-animation: section-title-run-sm 5s infinite linear; animation: section-title-run-sm 5s infinite linear; } @-webkit-keyframes section-title-run { 0% { left: 0; } 50% { left: 145px; } 100% { left: 0; } } @-webkit-keyframes section-title-run-center { 0% { left: 50%; margin-left: -75px; } 50% { left: 50%; margin-left: 45px; } 100% { left: 50%; margin-left: -75px; } } @-webkit-keyframes section-title-run-sm { 0% { left: 0; } 50% { left: 85px; } 100% { left: 0; } } /*-------------------------------------------------------------- # PAGINAÇÃO --------------------------------------------------------------*/ .pagination-minimal { --pg-size: 44px; /* tamanho do botão */ --pg-radius: 25px; /* arredondado (ajuste se quiser mais/menos) */ gap: 16px; /* espaço entre botões */ } /* remove overlap padrão do bootstrap pra o gap funcionar */ .pagination-minimal .page-item:not(:first-child) .page-link { margin-left: 0; } .pagination-minimal .page-link { width: var(--pg-size); height: var(--pg-size); display: flex; align-items: center; justify-content: center; border-radius: var(--pg-radius); border: 2px solid rgba(var(--bs-primary-rgb), .20); background: #fff; color: var(--fourth); font-weight: 700; line-height: 1; box-shadow: 0 1px 0 rgba(0,0,0,.03); transition: .15s ease; padding: 0; /* vira um quadradinho */ } .pagination-minimal .page-link:hover { background: rgba(var(--bs-primary-rgb), .06); border-color: rgba(var(--bs-primary-rgb), .35); color: var(--fourth); text-decoration: none; } .pagination-minimal .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } .pagination-minimal .page-item.disabled .page-link { background: #fff; color: #a7adb3; border-color: rgba(0,0,0,.08); opacity: .7; cursor: not-allowed; pointer-events: none; } @media (max-width: 575.98px) { .pagination.pagination-minimal { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding-inline: 8px; overflow-x: visible; } .pagination-minimal .page-item { flex: 0 0 auto; } .pagination-minimal { --pg-size: 51px; gap: 10px; } } /*-------------------------------------------------------------- # card noticias juridico --------------------------------------------------------------*/ .blog-item h3 { font-size: 24px } .blog-img { width: 100%; height: 250px; /* altura fixa do bloco */ overflow: hidden; /* esconde excesso da imagem */ } .blog-img img { width: 100%; height: 100%; object-fit: cover; } .btn-saibamais { display: inline-block; padding: 12px 28px; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; border: none; cursor: pointer; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-saibamais::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: all 0.5s ease; } .btn-saibamais:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb), 0.4); background: linear-gradient(135deg, var(--third), var(--primary)); } .btn-saibamais:hover::before { left: 100%; } .btn-saibamais:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(var(--bs-primary-rgb), 0.4); } /*-------------------------------------------------------------- # Alt Services Section --------------------------------------------------------------*/ .alt-services .img-bg { background-size: cover; background-position: center center; min-height: 400px; } .alt-services h3 { font-size: 28px; font-weight: 700; color: var(--secondary); margin-bottom: 20px; padding-bottom: 20px; position: relative; } .alt-services h3:after { content: ""; position: absolute; display: block; width: 50px; height: 3px; background: var(--primary); left: 0; bottom: 0; } .alt-services .icon-box { margin-top: 50px; } .alt-services .icon-box i { display: flex; align-items: center; justify-content: center; color: var(--primary); margin-right: 25px; font-size: 28px; width: 56px; height: 56px; border-radius: 4px; line-height: 0; box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08); background-color: #fff; transition: 0.3s; } .alt-services .icon-box:hover i { background-color: var(--primary); color: #fff; } .alt-services .icon-box h4 { font-weight: 700; margin-bottom: 10px; font-size: 18px; } .alt-services .icon-box h4 a { color: #000; transition: 0.3s; font-family: "Poppins", Sans-serif; } .alt-services .icon-box h4 a:hover { color: var(--primary); } .alt-services .icon-box p { line-height: 24px; font-size: 14px; margin-bottom: 0; font-family: var(--bs-body-font-family) } .jur-media { height: 220px; } .jur-media img { object-fit: cover; } .jur-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.5rem; } .blog-item.d-flex { min-height: 100%; } @media (min-width: 992px) { .article-figure { float: right; width: 42%; margin: 0 0 1rem 1.5rem; } .article-figure img { display: block; width: 100%; height: auto; } } @media (max-width: 991.98px) { .article-figure { width: 100%; margin: 0 0 1rem 0; } .article-figure img { width: 100%; height: auto; } } /* --------------------------------------------- Banner Style --------------------------------------------- */ /* Isola o reflow dentro dos blocos pesados */ .slider, .slider .banner, .owl-carousel, .swiper, .glightbox-container { contain: layout paint; } #section-1 { margin-top: 0px; height: 100vh; min-height: 700px; color: #fff; background-color: #222; position: relative; } #section-1 .content-slider { position: relative; width: 100%; height: 100%; } #section-1 .content-slider input { display: none; } #section-1 .content-slider .slider { position: relative; width: inherit; height: inherit; overflow: hidden; } #section-1 .content-slider .slider .banner { position: absolute; top: 0; left: 0; opacity: 0; z-index: 0; width: inherit; height: inherit; text-align: center; background-repeat: no-repeat; background-position: 50% 50%; transition: all 0.5s ease; } #section-1 .more-info { margin-top: 60px; background-color: #fff; padding: 30px 60px; border-radius: 61px; position: absolute; width: 80%; left: 10%; bottom: 130px; display: inline-block; } #section-1 .more-info i { color: var(--primary); font-size: 24px; width: 60px; height: 60px; display: inline-block; text-align: center; line-height: 58px; border: 1px solid var(--primary); border-radius: 50%; float: left; margin-right: 20px; } #section-1 .more-info h4 { text-align: left; font-size: 20px; color: var(--primary); font-weight: 700; line-height: 28px; } #section-1 .more-info h4 span { font-size: 15px; color: #afafaf; font-weight: 400; } #section-1 .main-button { margin-top: 8px; text-align: right; } #section-1 .main-button a:hover { background-color: var(--primary); border-color: var(--primary); color: #fff; opacity: 0.8; } #section-1 .content-slider .slider .banner .banner-inner-wrapper { height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; } #section-1 .content-slider .slider .banner .banner-inner-wrapper { height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; flex-direction: column; } #section-1 .content-slider .slider .banner .banner-inner-wrapper h2 { font-size: 50px; color: #fff; font-weight: 700; margin-bottom: 30px; } #section-1 .content-slider .slider .banner .banner-inner-wrapper span { font-weight: 500; font-size: 20px; color: #fff; margin-bottom: 20px; } #section-1 .content-slider .slider .banner .banner-inner-wrapper .learn-more-button a:hover { color: var(--primary); border-color: var(--primary); transition: 0.3s; } .botao-banner { margin-top: 2em; } .botao-banner .btn { background-color: #a23b00 !important; /* tom mais escuro */ color: #ffffff !important; border: none; } .botao-banner .btn:hover { background-color: #8c2f00 !important; } video { object-fit: cover; width: 100%; height: 100%; } .banner video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 0; filter: brightness(0.75); } .banner .banner-inner-wrapper { position: relative; z-index: 1; } #section-1 .content-slider .slider #top-banner-2 { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5)), url('../img/carrossel/carousel-2.webp') no-repeat center center; background-size: cover; } #section-1 .content-slider .slider #top-banner-4 { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/carrossel/carousel-4.webp') no-repeat top; background-size: cover; } #section-1 .content-slider nav { position: absolute; bottom: 30px; width: 100%; z-index: 10; text-align: center; } #section-1 .content-slider nav .controls { display: block; width: 100%; margin: 0 auto; font-family: "Poppins", Sans-serif; color: #fff; } #section-1 .content-slider nav .controls label { position: relative; display: inline-block; width: 10%; height: 3.1em; overflow: hidden; margin: 0 1em; padding-top: 1em; text-align: left; text-transform: uppercase; font-family: "Poppins", Sans-serif; font-size: 1em; color: #f6eac5; font-weight: 400; cursor: pointer; transition: all 0.3s; } #section-1 .content-slider nav .controls label .progressbar { position: absolute; top: 0; left: 0; height: 2px; width: 100%; background: #f6eac5; z-index: 100; } #section-1 .content-slider nav .controls label .progressbar .progressbar-fill { position: inherit; width: inherit; height: inherit; margin-left: -100%; background: var(--primary); } #section-1 .content-slider nav .controls label span.text { font-size: 20px; font-weight: 500; text-align: center; display: inline-block; width: 100%; } #section-1 .content-slider nav .controls label:hover { color: var(--primary); } #section-1 .content-slider #banner1:checked ~ .slider #top-banner-1, #section-1 .content-slider #banner2:checked ~ .slider #top-banner-2, #section-1 .content-slider #banner3:checked ~ .slider #top-banner-3, #section-1 .content-slider #banner4:checked ~ .slider #top-banner-4, #section-1 .content-slider #banner5:checked ~ .slider #top-banner-5 { opacity: 1; z-index: 1; } #section-1 .content-slider #banner1:checked ~ .slider nav label:nth-of-type(1), #section-1 .content-slider #banner2:checked ~ .slider nav label:nth-of-type(2), #section-1 .content-slider #banner3:checked ~ .slider nav label:nth-of-type(3), #section-1 .content-slider #banner4:checked ~ .slider nav label:nth-of-type(4), #section-1 .content-slider #banner5:checked ~ .slider nav label:nth-of-type(5) { cursor: default; color: #fff; transition: all 0.5s; } #section-1 .content-slider #banner1:checked ~ .slider nav label:nth-of-type(1) .progressbar, #section-1 .content-slider #banner2:checked ~ .slider nav label:nth-of-type(2) .progressbar, #section-1 .content-slider #banner3:checked ~ .slider nav label:nth-of-type(3) .progressbar, #section-1 .content-slider #banner4:checked ~ .slider nav label:nth-of-type(4) .progressbar, #section-1 .content-slider #banner5:checked ~ .slider nav label:nth-of-type(5) .progressbar { background: #fff; } #section-1 .content-slider #banner1:checked ~ .slider nav label:nth-of-type(1) .progressbar-fill, #section-1 .content-slider #banner2:checked ~ .slider nav label:nth-of-type(2) .progressbar-fill, #section-1 .content-slider #banner3:checked ~ .slider nav label:nth-of-type(3) .progressbar-fill, #section-1 .content-slider #banner4:checked ~ .slider nav label:nth-of-type(4) .progressbar-fill, #section-1 .content-slider #banner5:checked ~ .slider nav label:nth-of-type(5) .progressbar-fill { animation: progressBarFill 6s linear; } /* Animations */ @keyframes progressBarFill { from { margin-left: -100%; } to { margin-left: 0; } } /*-------------------------------------------------------------- # FAQ CONTATO --------------------------------------------------------------*/ .contact-hub { padding: clamp(16px, 3.5vw, 40px); } .hub-wrapper { display: grid; grid-template-columns: 280px 1fr; gap: clamp(16px, 2.8vw, 28px); align-items: start; } .hub-nav { display: grid; gap: 16px; position: sticky; top: 16px; align-self: start; } .hub-item { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 22px; padding: 16px 18px; background: #fff; color: #1a1a1a; font: 600 1rem/1.2 "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; box-shadow: 0 10px 25px rgba(0,0,0,.08); cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .hub-item:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,0,0,.12); border-color: rgba(0,0,0,.12); } .hub-item.is-active { outline: 3px solid rgba(255,111,15,.35); border-color: #FF6F0F; } .hub-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,111,15,.12); color: #FF6F0F; } .hub-title { text-align: left; } .hub-content { background: #fff; border-radius: 26px; box-shadow: 0 10px 25px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.06); overflow: clip; height: 100%; } .hub-panel { padding: clamp(18px, 3vw, 32px); animation: fadeSlide .25s ease both; } .hub-panel[hidden] { display: none; } .panel-header h3 { font-size: clamp(1.25rem, 1.3rem + .6vw, 1.8rem); margin: 0 0 8px; } .panel-header p { margin: 0 0 18px; color: #6b7280; } .panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .panel-card { border: 1px dashed rgba(0,0,0,.14); border-radius: 22px; padding: 16px; } .panel-card h4 { margin: 0 0 6px; font-size: 1.05rem; } .panel-list { margin: 8px 0 0; padding: 0 0 0 18px; } .panel-list a { text-decoration: none; border-bottom: 1px solid transparent; } .panel-list a:hover { border-color: #FF6F0F; } @media (max-width: 980px) { .hub-wrapper { grid-template-columns: 1fr; gap: 16px; } .hub-nav { display: grid; grid-template-columns: 1fr; gap: 12px; position: static; margin-bottom: 8px; overflow: visible; } .hub-item { min-width: 0; width: 100%; grid-template-columns: 40px 1fr; text-align: left; justify-content: flex-start; } .hub-icon { margin: 0; } .hub-title { text-align: left; } .hub-content { padding: 16px; } .panel-grid { grid-template-columns: 1fr; } } @keyframes fadeSlide { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } } /*-------------------------------------------------------------- # STATS COUNTER SECTION --------------------------------------------------------------*/ .section-bg { background-color: #f5f6f7; } /* section { padding: 80px 0; overflow: hidden; } */ .stats-counter .stats-item { background: #fff; /*box-shadow: 0px 0 30px rgba(82, 86, 94, 0.05);*/ box-shadow: 0px 0px 15px rgb(0 0 0 / 58%); padding: 30px; } .stats-counter .stats-item i { font-size: 42px; line-height: 0; margin-right: 20px; color: var(--fourth); } .stats-counter .stats-item span { font-size: 36px; display: block; font-weight: 600; color: var(--fourth); } .stats-counter .stats-item p { padding: 0; margin: 0; font-family: var(--fourth); font-size: 14px; } /*-------------------------------------------------------------- # STATS COUNTER SECTION --------------------------------------------------------------*/ /*-------------------------------------------------------------- # BENEFICIOS --------------------------------------------------------------*/ .benefits-wrap { position: relative; } .benefits-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; } @media (max-width: 991.98px) { .benefits-grid { gap: 20px; } } @media (max-width: 767.98px) { .benefits-grid { grid-template-columns: 1fr; } } .benefit-card { grid-column: span 6; /* 2 colunas no desktop */ position: relative; border-radius: 18px; overflow: hidden; min-height: 240px; background: #0f172a; /* fallback */ box-shadow: 0 6px 24px rgba(0,0,0,.15); transform: translateZ(0); transition: transform .35s ease, box-shadow .35s ease; isolation: isolate; } @media (max-width: 991.98px) { .benefit-card { grid-column: span 12; } } .benefit-media { position: absolute; inset: 0; } .benefit-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9); transform: scale(1.02); transition: transform .45s ease, filter .45s ease; } /* overlay com fade preto no rodapé */ .benefit-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,.0) 80% ); z-index: 1; transition: opacity .35s ease; } /* conteúdo */ .benefit-content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: #fff; } .benefit-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; letter-spacing: .02em; opacity: .9; margin-bottom: 8px; } .benefit-title { font-weight: 700; font-size: 1.25rem; line-height: 1.2; color: #FF6F0F; margin: 0 0 6px 0; } .benefit-desc { font-size: .95rem; opacity: .9; margin: 0; } /* Botão circular (play/arrow) */ .benefit-cta { position: absolute; top: 16px; left: 16px; z-index: 6; /* acima de tudo */ width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: #fff; color: #FF6F0F; /* cor fixa da marca */ box-shadow: 0 8px 20px rgba(0,0,0,.18); transition: transform .35s ease, background .35s ease, color .35s ease; } .benefit-cta i { font-size: 20px; line-height: 1; } .benefit-link { position: absolute; inset: 0; z-index: 4; /* abaixo do botão play */ } /* Hover states */ .benefit-card:hover { transform: translateY(-8px); box-shadow: 0 14px 36px rgba(0,0,0,.22); } .benefit-card:hover .benefit-media img { transform: scale(1.06); filter: saturate(1.05) contrast(1.05); } .benefit-card:hover .benefit-cta { transform: scale(1.06); background: #FF6F0F; color: #000; } /* acessibilidade/animação reduzida */ @media (prefers-reduced-motion: reduce) { .benefit-card, .benefit-media img, .benefit-cta { transition: none !important; } } /* ===== CTA FINAL (MUITO MAIS) – versão aprimorada ===== */ .benefit-card.cta-card { grid-column: span 12; /* ocupa a linha inteira */ background: linear-gradient(135deg,#FF6F0F 0%,#ff8f40 100%); position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(180px, 22vw, 240px); padding: clamp(18px, 3vw, 28px); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow: hidden; } /* tira overlay e posicionamento absoluto herdado */ .benefit-card.cta-card .benefit-overlay { display: none; } .benefit-card.cta-card .benefit-content { position: relative; inset: auto; z-index: 2; padding: 0; text-align: center; color: #fff; max-width: 920px; width: 100%; } /* leve brilho/vidro por cima para dar profundidade */ .benefit-card.cta-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 55%); pointer-events: none; z-index: 1; } /* tipografia do CTA */ .cta-eyebrow { font-size: .9rem; letter-spacing: .02em; opacity: .9; margin-bottom: 6px; } .benefit-card.cta-card .benefit-title { color: #fff; margin: 0 0 10px 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); text-shadow: 0 1px 0 rgba(0,0,0,.15); } .benefit-card.cta-card .benefit-desc { color: #fff; opacity: .95; margin: 0 0 16px 0; font-weight: 500; } /* botão pílula chamativo */ .cta-actions .btn-cta { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #FF6F0F; font-weight: 700; padding: 12px 26px; border-radius: 999px; border: none; box-shadow: 0 8px 20px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.6); transition: transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease; } .cta-actions .btn-cta i { font-size: 18px; line-height: 1; } .benefit-card.cta-card:hover .btn-cta { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.8); } /* estado de foco/teclado acessível */ .cta-actions .btn-cta:focus-visible { outline: 3px solid #000; outline-offset: 2px; } /* responsivo: em telas bem pequenas, dá mais respiro */ @media (max-width: 480px) { .benefit-card.cta-card { padding: 18px; } .cta-actions .btn-cta { width: 100%; justify-content: center; } } .destination { position: relative; } .destination .thumb { position: relative; border-radius: 10px; overflow: hidden; } .thumb img { object-fit: cover; } .destination .thumb:before { position: absolute; content: ""; z-index: 1; bottom: 0; left: 0; height: 50%; width: 100%; opacity: .5; background: black; background: -webkit-gradient(linear, left bottom, left top, from(black), to(rgba(0, 212, 255, 0))); background: -webkit-linear-gradient(bottom, black 0%, rgba(0, 212, 255, 0) 100%); background: -o-linear-gradient(bottom, black 0%, rgba(0, 212, 255, 0) 100%); background: linear-gradient(0deg, black 0%, rgba(0, 212, 255, 0) 100%); } .destination .price { position: absolute; right: 0; bottom: 0; display: inline-block; padding: 30px; font-size: 20px; color: #fff; z-index: 2; } .destination h3, .destination .h3 { font-weight: 700; } .destination h3 a, .destination .h3 a { color: #343661; } .destination .meta { color: #999; } .destination-slider-wrap { position: relative; } .destination-slider-wrap .tns-nav { position: absolute; bottom: -50px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-align: center; } .destination-slider-wrap .tns-nav button { background: none; border: none; display: inline-block; position: relative; width: 0px !important; height: 7px !important; margin: 2px; } .destination-slider-wrap .tns-nav button:active, .destination-slider-wrap .tns-nav button:focus, .destination-slider-wrap .tns-nav button:hover { outline: none; -webkit-box-shadow: none; box-shadow: none; background: none; } .destination-slider-wrap .tns-nav button:before { display: block; width: 9px; height: 9px; left: 0; top: 0; position: absolute; content: ""; border-radius: 50%; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; background-color: transparent; border: 2px solid #f17945; } .destination-slider-wrap .tns-nav button:hover:before, .destination-slider-wrap .tns-nav button.tns-nav-active:before { background-color: #f17945; } #destination-controls:active, #destination-controls:focus, #prevnext-testimonial:active, #prevnext-testimonial:focus { outline: none; } #destination-controls .next, #destination-controls .prev, #prevnext-testimonial .next, #prevnext-testimonial .prev { cursor: pointer; display: inline-block; position: relative; -webkit-transition: .3s all ease; -o-transition: .3s all ease; transition: .3s all ease; width: 80px; height: 80px; background-color: #efefef; border-radius: 50%; } #destination-controls .next > span, #destination-controls .prev > span, #prevnext-testimonial .next > span, #prevnext-testimonial .prev > span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #destination-controls .next:hover, #destination-controls .prev:hover, #prevnext-testimonial .next:hover, #prevnext-testimonial .prev:hover { opacity: 1; } #destination-controls .next:hover, #destination-controls .prev:hover, #prevnext-testimonial .next:hover, #prevnext-testimonial .prev:hover { background-color: #f17945; color: #fff; } #destination-controls .prev, #prevnext-testimonial .prev { right: 0; } #destination-controls .prev:hover, #prevnext-testimonial .prev:hover { color: #fff; right: 7px; } #destination-controls .next, #prevnext-testimonial .next { left: 0; } #destination-controls .next:hover, #prevnext-testimonial .next:hover { color: #fff; left: 7px; } .section-3 { margin-top: 40px; margin-bottom: 40px; } /*-------------------------------------------------------------- # BENEFICIOS --------------------------------------------------------------*/ @media (min-width: 992px) { .header { margin-top: -120px; } } .bg-white { background-color: #fff !important; } .header-carousel .owl-nav { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); display: flex; flex-direction: column; } .header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next { margin: 7px 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--primary); border-radius: 40px; font-size: 20px; transition: .5s; } .header-carousel .owl-nav .owl-prev:hover, .header-carousel .owl-nav .owl-next:hover { background: var(--dark); } @media (max-width: 768px) { .header-carousel .owl-nav { left: 25px; } } /*GALERY*/ .btn:focus, .btn:active, button:focus, button:active { outline: none !important; box-shadow: none !important; } #image-gallery .modal-footer { display: block; } .thumb { margin-top: 15px; margin-bottom: 15px; } /*LISTA DE CIDADES NA REPRESENTACAO*/ /* Cartão da marca (lado esquerdo) */ .rep-card-brand { position: relative; color: #fff; background: transparent; } .rep-brand-bg { background: radial-gradient(1200px 600px at -10% 0%, rgba(255,111,15,.25), transparent 60%), radial-gradient(800px 800px at 110% 100%, rgba(255,111,15,.18), transparent 50%), linear-gradient(135deg, #101828, #1f2937); filter: saturate(1.05); } .rep-brand-logo { filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); } /* Badge com aspas */ .rep-quote-badge { width: 40px; height: 40px; background: rgba(255,111,15,.12); color: #ff6f0f; border: 1px solid rgba(255,111,15,.35); } /* Tipografia do texto para leitura confortável */ .rep-copy p { font-size: 1rem; line-height: 1.75; color: #374151; /* slate-700 */ margin-bottom: 1rem; } .rep-copy p:last-child { margin-bottom: 0; } /* Avatar placeholder – troque por foto se tiver */ .rep-avatar.placeholder { width: 42px; height: 42px; background: linear-gradient(180deg, #e5e7eb, #cbd5e1); border: 1px solid #e5e7eb; } /* Acentos com a cor da marca */ .text-primary { color: #ff6f0f !important; } .btn-primary { background-color: #ff6f0f; border-color: #ff6f0f; } .btn-primary:hover { filter: brightness(.95); } /* Pequenas melhorias responsivas */ @media (max-width: 991.98px) { .rep-brand-logo { max-height: 90px; } } /* Paleta da marca */ .text-primary { color: #FF6F0F !important; } .btn-primary { background: #FF6F0F; border-color: #FF6F0F; } .btn-primary:hover { filter: brightness(.95); } /* KPIs em pílulas */ .rep-pill { background: #fff; border: 1px solid #eef2f7; border-radius: 16px; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .15rem; height: 100%; } .rep-pill-num { font-weight: 800; font-size: 1.15rem; line-height: 1; color: #111; } .rep-pill-label { font-size: .85rem; color: #6b7280; } /* Lista com check */ .rep-check li { margin: .35rem 0; display: flex; gap: .5rem; align-items: flex-start; } .rep-check i { color: #22c55e; margin-top: .2rem; } .rep-check li { margin-bottom: .5rem; font-size: .95rem; } /* Busca */ .rep-search .form-control:focus { box-shadow: 0 0 0 .2rem rgba(255,111,15,.2); border-color: #ff6f0f; } /* Barra A–Z */ .rep-az { display: flex; flex-wrap: wrap; gap: .35rem; } .rep-az button { border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; padding: .25rem .55rem; font-size: .85rem; line-height: 1.1; } .rep-az button.active, .rep-az button:hover { border-color: #ff6f0f; color: #ff6f0f; } /* Lista rolável */ .rep-list { max-height: 560px; overflow: auto; } .rep-list .rep-cities li { padding: .22rem 0; border-bottom: 1px dashed #f1f5f9; } .rep-list .rep-cities li mark { background: rgba(255,111,15,.15); padding: 0 .15rem; border-radius: 4px; } /* Marca */ .text-primary { color: #ff6f0f !important; } .btn-primary { background: #ff6f0f; border-color: #ff6f0f; } .btn-primary:hover { filter: brightness(.95); } /* Acessibilidade: menos movimento */ @media (prefers-reduced-motion: reduce) { .wow { visibility: visible !important; animation: none !important; } } .section-base-territorial { width: 100%; max-width: 1200px; height: 500px; overflow: auto; margin: 20px auto; padding: 20px; box-sizing: border-box; } /*** About & Feature ***/ .about-img, .feature-img { position: relative; height: 100%; min-height: 400px; } .about-img img, .feature-img img { position: absolute; width: 60%; height: 80%; object-fit: cover; } .about-img img:last-child, .feature-img img:last-child { margin: 20% 0 0 40%; } .about-img::before, .feature-img::before { position: absolute; content: ""; width: 60%; height: 80%; top: 10%; left: 20%; border: 5px solid var(--primary); z-index: -1; } /* --------------------------------------------- Reservation Page Style --------------------------------------------- */ .second-page-heading { background-image: url(../img/heading/heading-bg3.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; padding: 200px 0px 190px 0px; text-align: center; } .second-page-heading h4 { font-size: 20px; font-weight: 500; color: #fff; margin-bottom: 15px; position: relative; padding-bottom: 25px; } .second-page-heading h4::after { position: absolute; width: 100px; height: 2px; background-color: rgba(250, 250, 250, 0.3); content: ''; left: 50%; bottom: 0; transform: translateX(-50px); } .second-page-heading h2 { font-size: 50px; font-weight: 700; color: #fff; margin-bottom: 30px; } .second-page-heading p { padding: 0px 15%; color: #fff; margin-bottom: 30px; } .second-page-heading .main-button a { border-color: #fff; color: #22b3c1; background-color: #fff; } .second-page-heading .main-button a:hover { border-color: #22b3c1; background-color: #22b3c1; color: #fff; } .reservation-info { margin-top: -150px; } .reservation-info1 { margin-top: 0px; } .more-info .info-item { background-color: #fff; border-radius: 23px; box-shadow: 0px 0px 15px rgba(0,0,0,0.15); text-align: center; padding: 20px; height: 96%; } .more-info .info-item1 { background-color: #fff; border-radius: 23px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15); text-align: center; padding: 20px; height: 200px !important; } .more-info .info-item i { background-color: #f0f0f0; width: 60px; height: 60px; display: inline-block; text-align: center; line-height: 60px; border-radius: 50px; color: #22b3c1; font-size: 20px; margin-bottom: 20px; } .more-info .info-item h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; } .more-info .info-item a { font-size: 20px; color: var(--primary); } .reservation-form { margin: 120px 0px; } .reservation-form #map { margin-bottom: -6px; } .reservation-form #reservation-form h4 { font-size: 30px; text-align: center; margin-bottom: 50px; } .reservation-form #reservation-form h4 em { font-style: normal; color: var(--primary); } .reservation-form #reservation-form { /* padding: 30px 60px; background-color: #f9f9f9;*/ border-bottom-right-radius: 23px; border-bottom-left-radius: 23px; } .reservation-form #reservation-form label { font-size: 15px; color: #afafaf; } .reservation-form #reservation-form input, .reservation-form #reservation-form select { width: 100%; height: 46px; /*background-color: transparent; border-radius: 23px;*/ border: 1px solid #e0e0e0; padding: 0px 20px; cursor: pointer; margin-bottom: 30px; max-width: 100%; } .reservation-form #reservation-form input.date { color: #aaa; } .reservation-form #reservation-form button { font-size: 14px; color: #fff; background-color: var(--third); border: 1px solid var(--third); padding: 12px 30px; width: 100%; text-align: center; display: inline-block; border-radius: 25px; font-weight: 500; text-transform: capitalize; letter-spacing: 0.5px; transition: all .3s; position: relative; overflow: hidden; } .reservation-form #reservation-form button:hover { opacity: 0.8; } /*-------------------------------------------------------------- # CONTATO --------------------------------------------------------------*/ .wrapper { position: relative; max-width: 100% !important; margin: 50px auto; } .wizard { max-width: 1080px; margin: 0 auto; } .wizard__header { position: relative; color: #FFF; padding: 50px; border-radius: 5px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; text-align: center; height: 100px; background: url('../img/heading/heading-bg3.jpg'); background-color: #4D637B; background-position: center; background-repeat: no-repeat; background-size: cover; } .wizard__header-content { position: absolute; width: 100%; padding: 0 50px; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -60%); } .wizard__header-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(77, 99, 123, 0.6); border-top-left-radius: 5px; border-top-right-radius: 5px; } .wizard__title { font-size: 1.5rem; line-height: 2rem; margin: 0; } .wizard__subheading { text-transform: uppercase; margin: 0; font-size: 0.8rem; font-weight: 100; letter-spacing: 2px; } .wizard__subheading span { font-weight: 600; } .wizard__steps { position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY(50%); z-index: 10; } .wizard__footer { padding: 0 50px 50px; border-radius: 5px; } .wizard__content { background: #FFF; box-shadow: 0px 0px 10px #c5c5c5; border-radius: 5px; } .wizard__congrats-message { color: #676767; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .wizard.completed .wizard__content { animation: gettingOut 2s cubic-bezier(1, -0.71, 1, 1.16) forwards; } .wizard.completed .wizard__congrats-message { animation: fadeIn 2s cubic-bezier(1, -0.71, 1, 1.16) forwards; } .line { position: absolute; top: 20px; left: 50%; z-index: -1; height: 6px; transition: all 0.5s ease; } .line.-start { left: 0%; background: #5094de; width: 50%; } .line.-end { left: 50%; background: #5094de; width: 50%; } .line.-background { background: #c3c3c3; width: 100%; } .line.-progress { background: #5094de; width: 100%; transform: scaleX(0); transform-origin: left center; } .line.-in-progress { transform: scaleX(1); } .panels { position: relative; overflow: hidden; } .panel { position: absolute; top: 0; left: 0; transition: 0.5s all; padding: 50px; } .panel__header { margin-bottom: 30px; } .panel__title { font-size: 1.5rem; line-height: 2rem; margin: 0; } .panel__subheading { font-size: 0.9rem; line-height: 1.2rem; margin: 0; } .panel.movingOutBackward { transform: translateX(-1080px); } .panel.movingOutFoward { transform: translateX(1080px); } .panel.movingIn { transform: translateX(0); } .steps { position: relative; display: flex; flex: 0 1 auto; color: #fff; } .step { flex-basis: 0; flex-grow: 1; max-width: 100%; box-sizing: border-box; text-align: center; border-radius: 5px; } .step__content { position: relative; z-index: 2; } .step__number { font-size: 1.3rem; color: #676767; background: #FFF; font-weight: 800; width: 40px; height: 40px; line-height: 30px; margin: 0 auto; border-radius: 50%; border: 5px solid #c3c3c3; transition: opacity 0.5s; opacity: 1; z-index: 5; } .step.-completed .step__number { opacity: 0; } .step.-completed .checkmark { z-index: 0; animation: fill 0.4s ease-in-out forwards, scale 0.3s ease-in-out 0.6s both; } .step.-completed .checkmark__check { animation: stroke 0.5s linear 0.4s forwards; } .step.-completed .line { transform: scaleX(1); } .step:last-child .line { width: 50%; } .checkmark { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; border-radius: 50%; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; box-shadow: inset 0px 0px 0px #75b2f5; z-index: -1; } .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 8; stroke-miterlimit: 10; stroke: #5094de; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 40; stroke-dashoffset: 40; stroke: #FFF; stroke-width: 5; } .button { cursor: pointer; font-size: 1rem; line-height: 1rem; background: #5094de; color: #FFF; padding: 10px 15px; border: none; outline: none; display: inline-block; transition: all 0.3s; } .button:hover { background: #7baee6; } .button.previous { margin-right: 5px; } .button.disabled { background: #c3c3c3; cursor: default; } @keyframes stroke { to { stroke-dashoffset: 0; } } @keyframes scale { 50% { transform: translateX(-50%) scale3d(1.5, 1.5, 1.5); } 100% { transform: scale3d(0); } } @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #75b2f5; } } @keyframes gettingOut { 0% { transform: translateY(0%); } 30% { transform: translateY(100px); } 100% { transform: translateY(-200%); } } @keyframes fadeIn { 100% { opacity: 1; } } .wizard > .content > .body { position: relative !important; float: none !important; width: 100% !important; height: auto !important; padding: 2% !important; box-sizing: border-box !important; } .wizard > .content { height: auto !important; overflow: visible !important; } .wizard-big.wizard > .content { min-height: 400px !important; } .form-group { margin-bottom: 10px !important; } .wizard > .steps .current a, .wizard > .steps .current a:hover, .wizard > .steps .current a:active { background: var(--primary) !important; color: #fff !important; cursor: default !important; } .wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active { background: var(--secondary) !important; color: #fff !important; } .wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active { background: var(--primary) !important; color: #fff !important; display: block !important; padding: 0.5em 1em !important; text-decoration: none !important; border-radius: 5px !important; } .wizard > .actions .disabled a, .wizard > .actions .disabled a:hover, .wizard > .actions .disabled a:active { background: #eee !important; color: #999 !important; } .wizard > .steps > ul { display: flex !important; flex-wrap: wrap !important; gap: 0 !important; justify-content: center; } .wizard > .steps > ul > li { flex: 1 1 25% !important; max-width: 25% !important; } @media (max-width: 992px) { .wizard > .steps > ul > li { flex: 1 1 50% !important; max-width: 50% !important; } } @media (max-width: 768px) { .wizard-big.wizard > .content { min-height: 360px !important; } } @media (max-width: 576px) { .wizard > .steps > ul > li { flex: 1 1 100% !important; max-width: 100% !important; } } /*-------------------------------------------------------------- # PAGINA DETALHES --------------------------------------------------------------*/ .texto-detalhes { text-align: justify; } .texto-detalhes h2, texto-detalhes h3, texto-detalhes h4, texto-detalhes h5 { text-align: left; } @media (min-width: 992px) { .article-figure { float: right; width: 42%; margin: 0 0 1rem 1.5rem; } .article-figure img { display: block; width: 100%; height: auto; } } @media (max-width: 991.98px) { .article-figure { width: 100%; margin: 0 0 1rem 0; } .article-figure img { width: 100%; height: auto; } }