/**
* Custom CSS for Grupo ESCF Theme - Brand Colors Applied
* Brand Colors: #000000, #015023, #32b74a, #ffffff
*/
/* ================================================
Brand Color Variables Override
================================================ */
:root {
/* Cores principais da marca ESCF */
--escf-black: #000000;
--escf-dark-green: #015023;
--escf-light-green: #32b74a;
--escf-white: #ffffff;
/* Mapeamento para usar nas seções */
--escf-green-dark: #015023;
--escf-green-primary: #32b74a;
/* Override das variáveis do tema */
--tg-theme-primary: #015023;
--tg-color-dark-theme: #32b74a;
--tg-heading-color: #000000;
--tg-color-dark: #000000;
--tg-color-white-default: #ffffff;
}
/* ================================================
WhatsApp Floating Widget - Optimized
================================================ */
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
font-family: Arial, sans-serif;
}
.whatsapp-button {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--escf-light-green) 0%, var(--escf-dark-green) 100%);
border-radius: 50%;
box-shadow: 0 4px 20px rgba(50, 183, 74, 0.4);
color: var(--escf-white);
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
position: relative;
overflow: hidden;
will-change: transform;
}
.whatsapp-button:hover {
transform: scale(1.1);
background: linear-gradient(135deg, var(--escf-dark-green) 0%, var(--escf-light-green) 100%);
box-shadow: 0 6px 25px rgba(50, 183, 74, 0.5);
color: var(--escf-white);
text-decoration: none;
}
.whatsapp-button i {
font-size: 28px;
color: var(--escf-white);
transition: transform 0.3s ease;
}
.whatsapp-button:hover i {
transform: scale(1.1);
color: var(--escf-white);
}
.whatsapp-text {
position: absolute;
right: 70px;
top: 50%;
transform: translateY(-50%);
background: var(--escf-dark-green);
color: var(--escf-white);
padding: 8px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
pointer-events: none;
}
.whatsapp-text::after {
content: '';
position: absolute;
top: 50%;
right: -8px;
transform: translateY(-50%);
border-left: 8px solid var(--escf-dark-green);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.whatsapp-button:hover .whatsapp-text {
opacity: 1;
visibility: visible;
right: 75px;
}
/* WhatsApp Tooltip */
.whatsapp-tooltip {
position: absolute;
bottom: 75px;
right: 0;
background: var(--escf-dark-green);
color: var(--escf-white);
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
line-height: 1.4;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
z-index: 10000;
pointer-events: none;
}
.whatsapp-tooltip::after {
content: '';
position: absolute;
top: 100%;
right: 20px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid var(--escf-dark-green);
}
.whatsapp-float:hover .whatsapp-tooltip {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Optimized pulse animation */
.whatsapp-button {
animation: whatsapp-pulse 2s infinite ease-in-out;
}
@keyframes whatsapp-pulse {
0%, 100% {
box-shadow: 0 4px 20px rgba(50, 183, 74, 0.4);
}
50% {
box-shadow: 0 4px 20px rgba(50, 183, 74, 0.7);
}
}
/* ================================================
Performance Optimizations
================================================ */
/* GPU acceleration for smooth animations */
.btn:hover,
.whatsapp-button,
.form-control:focus {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
}
/* ================================================
Quick Access Blocks - Portal Institucional
================================================ */
/* Quick Access Section */
.quick-access-area {
background: #f6f6f6;
padding: 80px 0;
position: relative;
overflow: hidden;
}
.service-card.style3 .box-icon::after {
width: auto;
height: auto;
inset: 17px;
z-index: 1;
opacity: 1;
background: var(--tg-color-white-default);
}
.quick-access-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
/* Quick Access Cards */
.quick-access-card {
background: var(--escf-white);
border-radius: 15px;
padding: 35px 30px;
text-align: center;
border: 2px solid transparent;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
box-shadow: 0 8px 30px rgba(1, 80, 35, 0.08);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.quick-access-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(50, 183, 74, 0.05), transparent);
transition: left 0.6s ease;
}
.quick-access-card:hover {
transform: translateY(-10px) scale(1.02);
border-color: var(--escf-light-green);
box-shadow: 0 20px 40px rgba(1, 80, 35, 0.15);
}
.quick-access-card:hover::before {
left: 100%;
}
/* Card Icons */
.quick-access-card .card-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(135deg, var(--escf-light-green), var(--escf-dark-green));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.4s ease;
}
.quick-access-card:hover .card-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 25px rgba(50, 183, 74, 0.3);
}
.quick-access-card .card-icon i {
font-size: 36px;
color: var(--escf-white);
transition: all 0.3s ease;
}
.quick-access-card:hover .card-icon i {
transform: scale(1.1);
}
/* Card Content */
.quick-access-card .card-title {
font-size: 22px;
font-weight: 700;
color: var(--escf-black);
margin-bottom: 15px;
line-height: 1.3;
}
.quick-access-card .card-description {
font-size: 16px;
color: #666;
margin-bottom: 20px;
line-height: 1.5;
}
/* Card Features List */
.quick-access-card .card-features {
margin-bottom: 25px;
}
.quick-access-card .card-features ul {
list-style: none;
padding: 0;
margin: 0;
}
.quick-access-card .card-features li {
display: flex;
align-items: center;
font-size: 14px;
color: #555;
margin-bottom: 8px;
padding-left: 0;
}
.quick-access-card .card-features li i {
color: var(--escf-light-green);
font-size: 14px;
margin-right: 10px;
min-width: 16px;
}
/* Card Buttons */
.quick-access-card .btn {
width: 100%;
padding: 12px 25px;
border-radius: 8px;
font-weight: 600;
text-transform: none;
font-size: 16px;
margin-top: auto;
}
/* Responsive Design */
@media (max-width: 768px) {
.quick-access-area {
padding: 60px 0;
}
.quick-access-card {
padding: 25px 20px;
margin-bottom: 30px;
}
.quick-access-card .card-icon {
width: 70px;
height: 70px;
}
.quick-access-card .card-icon i {
font-size: 32px;
}
.quick-access-card .card-title {
font-size: 20px;
}
}
/* ================================================
About Page - História, Missão, Certificações
================================================ */
/* History & Mission Section */
.history-mission-area {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
}
.history-content h3 {
color: var(--escf-dark-green);
font-size: 24px;
font-weight: 700;
margin-bottom: 15px;
}
.history-content .lead {
font-size: 18px;
color: #555;
line-height: 1.6;
margin-bottom: 20px;
}
/* Values List */
.values-list {
margin-top: 30px;
}
.value-item {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
padding: 20px;
background: var(--escf-white);
border-radius: 10px;
box-shadow: 0 5px 15px rgba(1, 80, 35, 0.08);
transition: all 0.3s ease;
}
.value-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(1, 80, 35, 0.15);
}
.value-item i {
color: var(--escf-light-green);
font-size: 24px;
margin-right: 20px;
margin-top: 5px;
min-width: 30px;
}
.value-item h4 {
color: var(--escf-black);
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.value-item p {
color: #666;
margin: 0;
line-height: 1.5;
}
/* Timeline */
.history-timeline h3 {
color: var(--escf-dark-green);
font-size: 24px;
font-weight: 700;
}
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--escf-light-green), var(--escf-dark-green));
}
.timeline-item {
position: relative;
margin-bottom: 40px;
padding-left: 40px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -8px;
top: 5px;
width: 16px;
height: 16px;
background: var(--escf-light-green);
border: 3px solid var(--escf-white);
border-radius: 50%;
box-shadow: 0 0 0 3px var(--escf-light-green);
}
.timeline-year {
display: inline-block;
background: var(--escf-dark-green);
color: var(--escf-white);
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
}
.timeline-content h4 {
color: var(--escf-black);
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.timeline-content p {
color: #666;
margin: 0;
line-height: 1.5;
}
/* Certifications Section */
.certifications-area {
background: var(--escf-white);
}
.certification-card {
display: flex;
align-items: flex-start;
padding: 30px;
background: var(--escf-white);
border: 2px solid #f0f0f0;
border-radius: 15px;
transition: all 0.4s ease;
height: 100%;
}
.certification-card:hover {
border-color: var(--escf-light-green);
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(1, 80, 35, 0.1);
}
.cert-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--escf-light-green), var(--escf-dark-green));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
}
.cert-icon i {
color: var(--escf-white);
font-size: 24px;
}
.cert-content h4 {
color: var(--escf-black);
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.cert-content p {
color: #666;
margin-bottom: 10px;
line-height: 1.5;
}
.cert-year {
color: var(--escf-dark-green);
font-size: 14px;
font-weight: 600;
background: rgba(50, 183, 74, 0.1);
padding: 4px 12px;
border-radius: 15px;
display: inline-block;
}
/* Statistics */
.stats-wrapper {
background: linear-gradient(135deg, var(--escf-dark-green), var(--escf-light-green));
border-radius: 20px;
padding: 50px 30px;
color: var(--escf-white);
}
.stat-item {
padding: 20px;
}
.stat-number {
font-size: 48px;
font-weight: 700;
color: var(--escf-white);
margin-bottom: 10px;
line-height: 1;
}
.stat-label {
font-size: 16px;
color: rgba(255, 255, 255, 0.9);
margin: 0;
font-weight: 500;
}
/* Responsive Design */
@media (max-width: 768px) {
.timeline {
padding-left: 20px;
}
.timeline-item {
padding-left: 30px;
}
.certification-card {
flex-direction: column;
text-align: center;
}
.cert-icon {
margin-right: 0;
margin-bottom: 20px;
}
.stat-number {
font-size: 36px;
}
}
/* ================================================
Button Styles with ESCF Brand Colors
================================================ */
/* Primary buttons using the light green (#32b74a) */
.btn {
user-select: none;
-moz-user-select: none;
background: var(--escf-green-primary) none repeat scroll 0 0;
border: medium none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
color: var(--escf-white);
cursor: pointer;
display: inline-flex;
align-items: center;
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
margin-bottom: 0;
padding: 21px 32px 19px 32px;
text-align: center;
text-transform: capitalize;
touch-action: manipulation;
-webkit-transition: all 0.3s
ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s
ease-out 0s;
transition: 0.3s
cubic-bezier(0.25, 0.46, 0.45, 0.5);
transition-delay: 0s;
vertical-align: middle;
white-space: nowrap;
position: relative;
overflow: hidden;
z-index: 1;
gap: 10px;
min-width: 180px;
justify-content: center;
--arrow-hover-move-x: -110%;
}
.btn,
.btn-primary,
.btn-three,
.btn-two {
background-color: rgba(1, 80, 35, 0.1);
border-color: var(--escf-light-green);
color: var(--escf-green-dark);
transition: all 0.3s ease;
}
.btn:hover,
.btn-primary:hover,
.btn-three:hover,
.btn-two:hover {
background-color: rgba(1, 80, 35, 0.1) !important;
border-color: var(--escf-dark-green) !important;
transform: translateY(-2px) translateZ(0);
/* box-shadow: 0 4px 15px rgba(50, 183, 74, 0.3); */
}
/* Secondary/outline buttons */
.btn-outline,
.btn-four {
background-color: transparent !important;
border-color: var(--escf-light-green) !important;
color: var(--escf-light-green) !important;
}
.btn-outline:hover,
.btn-four:hover {
background-color: var(--escf-light-green) !important;
border-color: var(--escf-light-green) !important;
color: var(--escf-white) !important;
}
/* Focus states */
.btn:focus,
.btn:active {
background-color: var(--escf-dark-green) !important;
border-color: var(--escf-dark-green) !important;
box-shadow: 0 0 0 0.2rem rgba(50, 183, 74, 0.25) !important;
}
/* Optimized transitions */
.btn {
transition: transform 0.2s ease-out, background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Smooth scrolling with reduced motion support */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* ================================================
Responsive Optimizations
================================================ */
/* Mobile optimizations */
@media (max-width: 768px) {
.whatsapp-float {
bottom: 15px;
right: 15px;
}
.whatsapp-button {
width: 55px;
height: 55px;
}
.whatsapp-button i {
font-size: 24px;
}
.whatsapp-text {
display: none; /* Hide text on mobile for performance */
}
/* Optimize touch targets */
.btn {
min-height: 44px;
min-width: 44px;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.whatsapp-button {
box-shadow: 0 2px 10px rgba(37, 211, 102, 0.3);
}
}
/* ================================================
Accessibility Improvements
================================================ */
/* Focus states for keyboard navigation */
.whatsapp-button:focus {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.whatsapp-button {
animation: none;
}
.btn:hover {
transform: none;
}
* {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.whatsapp-button {
border: 2px solid #000;
}
.btn {
border: 1px solid currentColor;
}
}
/* ================================================
Brand Color Application - ESCF
================================================ */
/* Primary buttons and links */
.btn-primary,
.theme-btn,
.tg-btn,
.btn-theme {
background-color: var(--escf-green-primary) !important;
border-color: var(--escf-dark-green) !important;
color: var(--escf-white) !important;
}
.btn-primary:hover,
.theme-btn:hover,
.tg-btn:hover,
.btn-theme:hover {
background-color: var(--escf-light-green) !important;
border-color: var(--escf-dark-green) !important;
color: var(--escf-white) !important;
}
/* Secondary buttons */
.btn-outline-primary,
.btn-outline {
border-color: var(--escf-dark-green) !important;
color: var(--escf-dark-green) !important;
}
.btn-outline-primary:hover,
.btn-outline:hover {
background-color: var(--escf-dark-green) !important;
border-color: var(--escf-dark-green) !important;
color: var(--escf-white) !important;
}
/* ================================================
Navigation Styles with ESCF Brand Colors
================================================ */
/* Header background */
.header-area,
.main-header {
background-color: var(--escf-white);
}
/* Main navigation menu */
.navigation > li > a {
color: var(--escf-black) !important;
transition: color 0.3s ease;
}
.navigation > li > a:hover,
.navigation > li.active > a,
.navigation > li.menu-item-has-children.active > a {
color: var(--escf-light-green) !important;
}
/* WordPress menu active states - Current page indicators */
.navigation > li.current-menu-item > a,
.navigation > li.current_page_item > a,
.navigation > li.current-menu-ancestor > a,
.navigation > li.current-page-ancestor > a,
.navigation > li.current-menu-parent > a,
.navigation > li.current-page-parent > a {
color: var(--escf-light-green) !important;
position: relative;
}
/* Active indicator line */
.navigation > li.current-menu-item > a::after,
.navigation > li.current_page_item > a::after,
.navigation > li.current-menu-ancestor > a::after,
.navigation > li.current-page-ancestor > a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 2px;
background: var(--escf-light-green);
}
/* Mobile menu items */
.tgmobile__menu-box .navigation > li > a {
color: var(--escf-black) !important;
}
.tgmobile__menu-box .navigation > li > a:hover,
.tgmobile__menu-box .navigation > li.active > a {
color: var(--escf-light-green) !important;
}
/* Mobile menu - WordPress active states */
.tgmobile__menu-box .navigation > li.current-menu-item > a,
.tgmobile__menu-box .navigation > li.current_page_item > a,
.tgmobile__menu-box .navigation > li.current-menu-ancestor > a,
.tgmobile__menu-box .navigation > li.current-page-ancestor > a {
color: var(--escf-light-green) !important;
font-weight: 700;
}
/* Submenu styles */
.sub-menu {
display: block !important;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
.sub-menu li a {
color: var(--escf-black) !important;
transition: color 0.3s ease, transform 0.3s ease;
}
.sub-menu li a:hover {
color: var(--escf-light-green) !important;
}
/* Garantir que o dropdown apareça no hover */
.menu-item-has-children:hover > .sub-menu {
visibility: visible !important;
opacity: 1 !important;
transform: scale(1) !important;
}
.tgmenu__navbar-wrap > ul > li:hover > .sub-menu {
visibility: visible !important;
opacity: 1 !important;
transform: scale(1) !important;
}
/* Top header links */
.tg-header__top-links a {
color: var(--escf-black) !important;
transition: color 0.3s ease;
}
.tg-header__top-links a:hover {
color: var(--escf-light-green) !important;
}
/* Social links */
.tg-header__top-social a {
color: var(--escf-black) !important;
transition: color 0.3s ease;
}
.tg-header__top-social a:hover {
color: var(--escf-light-green) !important;
}
/* Legacy menu support */
.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a {
color: var(--escf-light-green) !important;
}
/* Titles and headings */
h1, h2, h3, h4, h5, h6,
.title,
.heading {
color: var(--escf-black);
}
/* ================================================
Links and Interactive Elements
================================================ */
/* General links */
a {
color: var(--escf-dark-green);
transition: color 0.3s ease;
}
a:hover {
color: var(--escf-light-green) !important;
text-decoration: none;
}
/* Links within content */
.content a,
.post-content a,
.page-content a {
color: var(--escf-dark-green);
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
}
.content a:hover,
.post-content a:hover,
.page-content a:hover {
color: var(--escf-light-green) !important;
border-bottom-color: var(--escf-light-green);
}
/* Footer */
.footer-area {
background-color: var(--escf-black) !important;
color: var(--escf-white) !important;
}
.footer__top-two .footer-contact .footer-contact_icon {
background: var(--escf-dark-green);
}
.process-nav-tabs .nav-item .nav-link.active, .process-nav-tabs .nav-item .nav-link:hover {
background: var(--escf-light-green) !important
}
.footer-area h1,
.footer-area h2,
.footer-area h3,
.footer-area h4,
.footer-area h5,
.footer-area h6 {
color: var(--escf-white) !important;
}
.footer-area a {
color: var(--escf-light-green);
}
.footer-area a:hover {
color: var(--escf-white);
}
/* Icons and accents
.icon,
.fa,
[class*="fa-"] {
color: var(--escf-dark-green);
}
*/
/* Borders and dividers */
.border-primary {
border-color: var(--escf-dark-green) !important;
}
/* Background utilities */
.bg-primary {
background-color: var(--escf-dark-green) !important;
}
.bg-secondary {
background-color: var(--escf-light-green) !important;
}
.bg-dark {
background-color: var(--escf-black) !important;
}
/* Text utilities */
.text-primary {
color: var(--escf-dark-green) !important;
}
.text-secondary {
color: var(--escf-light-green) !important;
}
.text-dark {
color: var(--escf-black) !important;
}
.text-white {
color: var(--escf-white) !important;
}
/* Form elements */
.form-control:focus {
border-color: var(--escf-light-green);
box-shadow: 0 0 0 0.2rem rgba(1, 80, 35, 0.25);
}
/* Progress bars and indicators */
.progress-bar {
background-color: var(--escf-dark-green);
}
/* Cards and panels */
.card-header {
background-color: var(--escf-dark-green);
color: var(--escf-white);
}
/* Special sections */
.hero-section,
.banner-area {
background: linear-gradient(135deg, var(--escf-dark-green) 0%, var(--escf-light-green) 100%);
}
/* WhatsApp button with brand colors */
.whatsapp-button {
background: linear-gradient(135deg, var(--escf-light-green) 0%, var(--escf-dark-green) 100%) !important;
}
.whatsapp-button:hover {
background: linear-gradient(135deg, var(--escf-dark-green) 0%, var(--escf-light-green) 100%) !important;
}
/* ================================================
Form Elements and Interactive Components
================================================ */
/* Form inputs and selects */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus {
border-color: var(--escf-light-green) !important;
box-shadow: 0 0 0 0.2rem rgba(50, 183, 74, 0.25) !important;
}
/* Checkbox and radio buttons */
.form-check-input:checked {
background-color: var(--escf-light-green) !important;
border-color: var(--escf-light-green) !important;
}
/* Pagination */
.pagination .page-link {
color: var(--escf-dark-green);
}
.pagination .page-link:hover,
.pagination .page-item.active .page-link {
background-color: var(--escf-light-green) !important;
border-color: var(--escf-light-green) !important;
color: var(--escf-white) !important;
}
/* Tabs */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
background-color: var(--escf-light-green) !important;
border-color: var(--escf-light-green) !important;
color: var(--escf-white) !important;
}
.video-thumb-box1 img {
height: 35rem;
object-fit: cover;
}
/* .nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
color: var(--escf-light-green) !important;
} */
/* Cards and panels hover effects */
.card:hover,
.service-card:hover,
.feature-card:hover {
border-color: var(--escf-light-green) !important;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(50, 183, 74, 0.15) !important;
}
/* Footer */
.footer-area {
background-color: var(--escf-black) !important;
color: var(--escf-white) !important;
}
.footer-area a {
color: var(--escf-white) !important;
}
.footer-area a:hover {
color: var(--escf-light-green) !important;
}
/* Scroll to top button - Positioned to the left to avoid WhatsApp button */
.scroll__top {
background-color: var(--escf-light-green) !important;
color: var(--escf-white) !important;
transition: all 0.3s ease;
right: auto !important;
left: 50px !important;
}
.scroll__top:hover {
background-color: var(--escf-dark-green) !important;
transform: translateY(-2px);
}
/* Mobile responsive adjustments for left position */
@media (max-width: 1199.98px) {
.scroll__top {
left: 25px !important;
}
}
@media (max-width: 991.98px) {
.scroll__top {
left: 30px !important;
}
}
@media (max-width: 767.98px) {
.scroll__top {
left: 15px !important;
}
}
/* ================================================
Hero Section - Enhanced Gradient with ESCF Brand Colors
================================================ */
/* Gradiente otimizado e sofisticado */
.hero-slider1 .swiper-slide:after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 30%, rgba(1, 80, 35, 0.12) 0%, transparent 50%),
linear-gradient(
135deg,
rgba(1, 80, 35, 0.2) 0%,
rgba(0, 0, 0, 0.65) 60%,
rgba(0, 0, 0, 0.8) 100%
) !important;
z-index: 1;
}
.hero-slider1 .swiper-slide:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
45deg,
rgba(1, 80, 35, 0.05) 0%,
rgba(0, 0, 0, 0.08) 100%
) !important;
z-index: 0;
}
/* Formas de fundo otimizadas */
.hero-slider1 .swiper-slide .hero-bg-shape1-1 {
background:
linear-gradient(
135deg,
var(--escf-dark-green) 0%,
var(--escf-light-green) 100%
),
radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%) !important;
opacity: 0.4 !important;
mix-blend-mode: overlay !important;
border-radius: 8px;
filter: blur(0.3px);
}
/* Container hero refinado */
.hero-style1 {
position: relative;
z-index: 2;
padding: 200px 0 140px !important;
min-height: 100vh;
display: flex;
align-items: center;
}
/* Subtitle aprimorado */
.hero-style1 .sub-title {
font-size: 19px;
color: rgba(255, 255, 255, 0.95);
text-transform: uppercase;
letter-spacing: 3px;
margin-top: 0;
margin-bottom: 30px;
font-weight: 500;
text-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
position: relative;
display: inline-block;
}
.hero-style1 .sub-title::before {
content: '';
position: absolute;
left: -30px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--escf-light-green));
}
.hero-style1 .sub-title span {
color: var(--escf-light-green);
font-weight: 700;
text-shadow: 0 0 15px rgba(50, 183, 74, 0.3);
}
/* Título principal otimizado */
.hero-style1 .hero-title {
color: var(--escf-white) !important;
margin-bottom: 35px;
line-height: 1.15;
font-weight: 800;
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
position: relative;
}
.hero-style1 .hero-title .title1,
.hero-style1 .hero-title .title2,
.hero-style1 .hero-title .title3 {
font-size: 3.6rem;
margin-bottom: 8px;
display: block;
animation: fadeInUp 0.8s ease forwards;
opacity: 0;
letter-spacing: -1px;
}
.hero-style1 .hero-title .title1 {
animation-delay: 0.2s;
font-weight: 700;
color: rgba(255, 255, 255, 0.98);
}
.hero-style1 .hero-title .title2 {
animation-delay: 0.4s;
color: var(--escf-light-green);
font-weight: 800;
position: relative;
text-shadow: 0 0 20px rgba(50, 183, 74, 0.25);
}
.hero-style1 .hero-title .title2::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--escf-light-green), rgba(50, 183, 74, 0.3));
transition: width 1s ease 0.8s;
border-radius: 1px;
}
.hero-style1 .hero-title .title2.animating::after {
width: 100%;
}
.hero-style1 .hero-title .title3 {
animation-delay: 0.6s;
font-size: 3.9rem;
margin-top: 12px;
font-weight: 900;
background: linear-gradient(135deg, #ffffff 0%, var(--escf-light-green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Texto hero refinado */
.hero-style1 .hero-text {
font-size: 19px;
color: rgba(255, 255, 255, 0.92);
margin-bottom: 40px;
line-height: 1.75;
max-width: 620px;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
animation: fadeInUp 0.8s ease forwards;
opacity: 0;
animation-delay: 0.5s;
font-weight: 400;
position: relative;
padding-left: 20px;
}
.hero-style1 .hero-text::before {
content: '';
position: absolute;
left: 0;
top: 5px;
width: 3px;
height: calc(100% - 10px);
background: linear-gradient(to bottom, var(--escf-light-green), rgba(50, 183, 74, 0.4));
border-radius: 2px;
box-shadow: 0 0 8px rgba(50, 183, 74, 0.2);
}
.hero-style1 .hero-features .feature-item:hover::before {
left: 100%;
}
.hero-style1 .hero-features .feature-item:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-5px) scale(1.03);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.35);
}
.hero-style1 .hero-features .feature-item i {
color: var(--escf-light-green);
font-size: 20px;
min-width: 24px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-style1 .hero-features .feature-item span {
color: var(--escf-white);
font-weight: 500;
font-size: 17px;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Botões simples e elegantes */
.hero-style1 .tg-button-wrap {
animation: fadeInUp 1s ease forwards;
opacity: 0;
animation-delay: 0.6s;
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.hero-style1 .btn {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
font-weight: 600;
letter-spacing: 1px;
border-radius: 30px;
padding: 16px 35px;
text-transform: uppercase;
font-size: 14px;
min-width: 200px;
text-align: center;
}
.hero-style1 .btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.hero-style1 .btn-three {
background: linear-gradient(135deg, var(--escf-light-green) 0%, var(--escf-dark-green) 100%);
border: none;
color: var(--escf-white);
}
.hero-style1 .btn-four {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.7);
color: var(--escf-white);
}
.hero-style1 .btn-four:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--escf-white);
}
/* Scroll indicator simples */
.hero-scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.scroll-indicator-btn {
display: flex;
flex-direction: column;
align-items: center;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.3s ease;
}
.scroll-indicator-btn:hover {
color: var(--escf-light-green);
transform: translateY(-3px);
}
.scroll-mouse {
width: 30px;
height: 50px;
border: 2px solid currentColor;
border-radius: 20px;
position: relative;
margin-bottom: 12px;
}
.scroll-wheel {
width: 6px;
height: 6px;
background: currentColor;
border-radius: 50%;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scrollWheel 2s infinite ease-in-out;
}
.scroll-text {
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 500;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Animações simples */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scrollWheel {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(18px);
}
}
/* Responsive adjustments */
@media (max-width: 1199.98px) {
.hero-style1 {
padding: 160px 0 100px !important;
}
.hero-style1 .hero-title .title1,
.hero-style1 .hero-title .title2 {
font-size: 3.2rem;
}
.hero-style1 .hero-title .title3 {
font-size: 3.6rem;
}
.hero-style1 .hero-text {
font-size: 18px;
max-width: 600px;
}
.hero-style1 .hero-features .feature-item {
padding: 10px 18px;
}
.hero-style1 .hero-features .feature-item span {
font-size: 16px;
}
.hero-style1 .btn {
padding: 14px 30px;
font-size: 14px;
min-width: 190px;
}
}
@media (max-width: 991.98px) {
.hero-style1 {
padding: 140px 0 80px !important;
text-align: center;
}
.hero-style1 .sub-title {
justify-content: center;
font-size: 18px;
}
.hero-style1 .sub-title::before {
display: none;
}
.hero-style1 .tg-button-wrap {
justify-content: center;
}
.hero-style1 .hero-title .title1,
.hero-style1 .hero-title .title2 {
font-size: 2.8rem;
}
.hero-style1 .hero-title .title3 {
font-size: 3.2rem;
}
.hero-style1 .hero-text {
margin: 0 auto 25px;
padding-left: 0;
max-width: 550px;
}
.hero-style1 .hero-text::before {
display: none;
}
.hero-style1 .hero-features {
justify-content: center;
}
.hero-style1 .hero-features .feature-item {
padding: 10px 16px;
}
.hero-style1 .hero-features .feature-item span {
font-size: 15px;
}
.hero-style1 .btn {
padding: 14px 30px;
font-size: 14px;
}
}
@media (max-width: 767.98px) {
.hero-style1 {
padding: 120px 0 60px !important;
}
.hero-style1 .sub-title {
font-size: 16px;
flex-direction: column;
gap: 10px;
}
.hero-style1 .hero-title .title1,
.hero-style1 .hero-title .title2 {
font-size: 2.2rem;
}
.hero-style1 .hero-title .title3 {
font-size: 2.5rem;
}
.hero-style1 .hero-text {
font-size: 16px;
max-width: 100%;
}
.hero-style1 .hero-features {
flex-direction: column;
align-items: center;
gap: 15px;
}
.hero-style1 .hero-features .feature-item {
width: 100%;
max-width: 300px;
justify-content: center;
}
.hero-style1 .btn {
padding: 12px 25px;
font-size: 13px;
width: 100%;
max-width: 250px;
margin: 0 auto;
min-width: auto;
}
.hero-style1 .tg-button-wrap {
flex-direction: column;
align-items: center;
gap: 15px;
}
.hero-scroll-indicator {
bottom: 20px;
}
.scroll-mouse {
width: 28px;
height: 46px;
}
.scroll-text {
font-size: 13px;
letter-spacing: 1px;
}
}
/* ================================================
Hero Breadcrumb Section - Compact & Navigation Focused
================================================ */
.hero-wrapper.hero-breadcrumb {
position: relative;
min-height: 250px;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-breadcrumb-container {
position: relative;
width: 100%;
height: 250px;
overflow: hidden;
}
.hero-slide-breadcrumb {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
/* Apply same gradient overlay as homepage hero but more subtle */
.hero-slide-breadcrumb::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(1, 80, 35, 0.4) 0%,
rgba(1, 80, 35, 0.7) 30%,
rgba(0, 0, 0, 0.8) 70%,
rgba(0, 0, 0, 0.9) 100%
),
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.4) 100%
);
z-index: 1;
}
.hero-slide-breadcrumb::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
45deg,
rgba(50, 183, 74, 0.2) 0%,
rgba(50, 183, 74, 0.3) 25%,
rgba(0, 0, 0, 0.3) 50%,
rgba(1, 80, 35, 0.3) 75%,
rgba(1, 80, 35, 0.5) 100%
);
z-index: 0;
}
/* Background shapes for breadcrumb hero - smaller and more subtle */
.hero-slide-breadcrumb .hero-bg-shape1-1 {
position: absolute;
width: 200px;
height: 150px;
opacity: 0.5;
background: linear-gradient(
135deg,
var(--escf-dark-green) 0%,
var(--escf-light-green) 100%
);
mix-blend-mode: soft-light;
border-radius: 0px 120px 0px 0px;
bottom: 0;
left: 0;
z-index: 1;
}
.hero-slide-breadcrumb .hero-bg-shape1-2 {
position: absolute;
width: 120px;
height: 90px;
opacity: 0.3;
background: linear-gradient(
45deg,
var(--escf-light-green) 0%,
var(--escf-dark-green) 100%
);
mix-blend-mode: overlay;
border-radius: 60px 0px 0px 0px;
top: 30px;
right: 80px;
z-index: 1;
}
/* Content styling - focused on breadcrumb navigation */
.hero-breadcrumb-content {
position: relative;
z-index: 2;
color: var(--escf-white);
text-align: center;
}
.breadcrumb-navigation {
margin-bottom: 20px;
opacity: 0.95;
}
.breadcrumb-navigation a {
color: var(--escf-light-green);
text-decoration: none;
transition: color 0.3s ease;
font-weight: 500;
}
.breadcrumb-navigation a:hover {
color: var(--escf-white);
}
.breadcrumb-navigation .breadcrumb-separator {
color: var(--escf-white);
margin: 0 10px;
opacity: 0.7;
}
.hero-breadcrumb-title {
font-size: 2.5rem;
font-weight: 700;
line-height: 1.2;
margin: 0;
color: var(--escf-white);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
/* Responsive adjustments */
@media (max-width: 1199.98px) {
.hero-breadcrumb-container {
height: 220px;
}
.hero-slide-breadcrumb .hero-bg-shape1-1 {
width: 160px;
height: 120px;
}
.hero-slide-breadcrumb .hero-bg-shape1-2 {
width: 100px;
height: 75px;
}
}
@media (max-width: 991.98px) {
.hero-breadcrumb-container {
height: 200px;
}
.hero-breadcrumb-title {
font-size: 2.2rem;
}
.hero-slide-breadcrumb .hero-bg-shape1-1 {
width: 140px;
height: 100px;
}
.hero-slide-breadcrumb .hero-bg-shape1-2 {
width: 80px;
height: 60px;
}
}
@media (max-width: 767.98px) {
.hero-breadcrumb-container {
height: 180px;
}
.hero-breadcrumb-title {
font-size: 1.8rem;
}
.breadcrumb-navigation {
font-size: 0.9rem;
}
.hero-slide-breadcrumb .hero-bg-shape1-1 {
width: 100px;
height: 75px;
}
.hero-slide-breadcrumb .hero-bg-shape1-2 {
width: 60px;
height: 45px;
}
}
/* Ensure all theme elements use brand colors */
.text-theme,
.theme-color {
color: var(--escf-light-green) !important;
}
.bg-theme,
.theme-bg {
background-color: var(--escf-light-green) !important;
}
/* Border accents */
.border-theme {
border-color: var(--escf-light-green) !important;
}
/* Icon colors */
.icon-theme,
.text-theme,
.theme-color {
color: var(--escf-light-green) !important;
}
/* ================================================
CTA Área do Cliente - Custom Styles
================================================ */
.cta-area-1 {
position: relative;
overflow: hidden;
}
.cta-area-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
z-index: 1;
}
.cta-area-1 .container {
position: relative;
z-index: 2;
}
.cta-features .feature-item {
transition: transform 0.3s ease;
}
.cta-features .feature-item:hover {
transform: translateY(-3px);
}
.cta-features .feature-icon {
flex-shrink: 0;
}
.btn-white {
background: var(--escf-white);
color: var(--escf-dark-green);
border: 2px solid var(--escf-white);
padding: 15px 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.btn-white:hover {
background: transparent;
color: var(--escf-white);
border-color: var(--escf-white);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(255,255,255,0.2);
}
.cta-action .cta-icon {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.theme-icon {
color: var(--escf-light-green) !important;
}
/* ========================================
Client Area Styles
======================================== */
/* Login Form */
.login-area {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.login-form-wrap {
background: var(--escf-white);
padding: 3rem;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.login-form .form-group {
position: relative;
}
.login-form .form-control {
padding: 1rem 1rem 1rem 3rem;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.login-form .form-control:focus {
border-color: var(--escf-green-primary);
box-shadow: 0 0 0 0.2rem rgba(50, 183, 74, 0.25);
}
.login-form .form-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
margin-top: 15px;
}
.checkbox-container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 1rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 4px;
transition: all 0.3s ease;
}
.checkbox-container:hover input ~ .checkmark {
background-color: #ccc;
}
.checkbox-container input:checked ~ .checkmark {
background-color: var(--escf-green-primary);
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
.checkbox-container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Dashboard */
.dashboard-area {
background: #f8f9fa;
}
.dashboard-header {
background: var(--escf-white);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.dashboard-tabs {
background: var(--escf-white);
border-radius: 15px 15px 0 0;
padding: 1rem 1rem 0;
border: none;
margin-bottom: 0;
}
.dashboard-tab {
background: none;
border: none;
padding: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
border-radius: 10px;
margin: 0 0.5rem;
transition: all 0.3s ease;
color: #6c757d;
}
.dashboard-tab:hover {
background: rgba(50, 183, 74, 0.1);
color: var(--escf-green-dark);
}
.dashboard-tab.active {
background: var(--escf-green-primary);
color: var(--escf-white);
}
.dashboard-tab .tab-icon {
font-size: 1.5rem;
}
.dashboard-tab .tab-content h5 {
margin: 0 0 0.25rem;
font-size: 1rem;
font-weight: 600;
}
.dashboard-tab .tab-content p {
margin: 0;
font-size: 0.8rem;
opacity: 0.8;
}
.dashboard-content {
background: var(--escf-white);
border-radius: 0 0 15px 15px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
/* Upload Area */
.upload-card {
border: 2px dashed #dee2e6;
border-radius: 15px;
padding: 3rem;
text-align: center;
transition: all 0.3s ease;
background: #f8f9fa;
}
.upload-card:hover {
border-color: var(--escf-green-primary);
background: rgba(50, 183, 74, 0.05);
}
.upload-icon {
font-size: 3rem;
color: var(--escf-green-primary);
margin-bottom: 1rem;
}
.upload-content h4 {
color: var(--escf-green-dark);
margin-bottom: 0.5rem;
}
.upload-content p {
color: #6c757d;
margin-bottom: 1.5rem;
}
/* Documents Table */
.documents-table {
background: var(--escf-white);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.documents-table .table {
margin: 0;
}
.documents-table th {
background: #f8f9fa;
border: none;
padding: 1rem;
font-weight: 600;
color: var(--escf-green-dark);
}
.documents-table td {
padding: 1rem;
border-top: 1px solid #e9ecef;
vertical-align: middle;
}
.doc-info {
display: flex;
align-items: center;
}
.doc-info span {
font-weight: 500;
}
.badge {
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
}
.status-badge {
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.status-processing {
background: rgba(255, 193, 7, 0.1);
color: #ffc107;
}
.status-approved {
background: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.status-completed {
background: rgba(40, 167, 69, 0.1);
color: #28a745;
}
.action-buttons {
display: flex;
gap: 0.5rem;
}
.action-buttons .btn {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
/* Process Cards */
.processes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.process-card {
background: var(--escf-white);
border-radius: 15px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.process-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.process-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.process-header h5 {
color: var(--escf-green-dark);
margin: 0;
flex: 1;
}
.process-id {
background: #e9ecef;
padding: 0.3rem 0.6rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
color: #6c757d;
}
.process-progress {
margin-bottom: 2rem;
}
.progress-bar {
background: #e9ecef;
border-radius: 10px;
height: 8px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-fill {
background: var(--escf-green-primary);
height: 100%;
border-radius: 10px;
transition: width 0.3s ease;
}
.progress-fill.completed {
background: #28a745;
}
.progress-text {
font-size: 0.9rem;
font-weight: 600;
color: var(--escf-green-dark);
}
.process-timeline {
margin-bottom: 2rem;
}
.dashboard-tab.active {
background: var(--escf-green-primary);
color: var(--escf-white);
}
/* ================================================
Breadcrumbs Styles
================================================ */
.breadcrumb-nav {
margin-bottom: 2rem;
padding: 1rem 0;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: 0.75rem 1rem;
margin-bottom: 0;
list-style: none;
background-color: rgba(50, 183, 74, 0.1);
border-radius: 0.5rem;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item + .breadcrumb-item {
padding-left: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: #6c757d;
content: ">";
}
.breadcrumb-item a {
color: var(--escf-dark-green);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-item a:hover {
color: var(--escf-light-green);
text-decoration: underline;
}
.breadcrumb-item.active {
color: #6c757d;
}
/* Responsive adjustments for breadcrumbs */
@media (max-width: 768px) {
.breadcrumb {
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
.breadcrumb-item + .breadcrumb-item::before {
padding-right: 0.25rem;
padding-left: 0.25rem;
}
}
.timeline-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
position: relative;
}
.timeline-item:not(:last-child)::after {
content: '';
position: absolute;
left: 7px;
top: 30px;
width: 2px;
height: 20px;
background: #e9ecef;
}
.timeline-item.completed::after {
background: var(--escf-green-primary);
}
.timeline-item.active::after {
background: #ffc107;
}
.timeline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: #e9ecef;
margin-right: 1rem;
flex-shrink: 0;
}
.timeline-item.completed .timeline-dot {
background: var(--escf-green-primary);
}
.timeline-item.active .timeline-dot {
background: #ffc107;
}
.timeline-content h6 {
margin: 0 0 0.25rem;
font-size: 0.9rem;
font-weight: 600;
color: var(--escf-green-dark);
}
.timeline-content p {
margin: 0;
font-size: 0.8rem;
color: #6c757d;
}
/* History Timeline */
.history-timeline {
position: relative;
}
.history-item {
display: flex;
margin-bottom: 2rem;
position: relative;
}
.history-date {
background: var(--escf-green-primary);
color: var(--escf-white);
border-radius: 10px;
padding: 0.8rem;
text-align: center;
margin-right: 1.5rem;
flex-shrink: 0;
width: 60px;
}
.history-date .date {
display: block;
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
}
.history-date .month {
display: block;
font-size: 0.8rem;
opacity: 0.9;
}
.history-content {
display: flex;
align-items: center;
flex: 1;
background: var(--escf-white);
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.history-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
font-size: 1.2rem;
color: var(--escf-white);
}
.history-icon.upload {
background: #007bff;
}
.history-icon.meeting {
background: #28a745;
}
.history-icon.email {
background: #ffc107;
}
.history-icon.call {
background: #dc3545;
}
.history-details {
flex: 1;
}
.history-details h6 {
margin: 0 0 0.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--escf-green-dark);
}
.history-details p {
margin: 0 0 0.5rem;
color: #6c757d;
font-size: 0.9rem;
}
.history-time {
font-size: 0.8rem;
color: #adb5bd;
font-weight: 500;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.section-header h4 {
color: var(--escf-green-dark);
margin: 0;
}
.list-filters,
.history-filters {
display: flex;
gap: 1rem;
}
.form-select {
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 0.5rem 1rem;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.form-select:focus {
border-color: var(--escf-green-primary);
box-shadow: 0 0 0 0.2rem rgba(50, 183, 74, 0.25);
}
/* Alert Styles */
.alert {
padding: 1rem;
border-radius: 8px;
border: none;
font-size: 0.9rem;
}
.alert-danger {
background: rgba(220, 53, 69, 0.1);
color: #dc3545;
}
.alert-warning {
background: rgba(255, 193, 7, 0.1);
color: #ffc107;
}
/* Responsive */
@media (max-width: 768px) {
.dashboard-tab {
flex-direction: column;
text-align: center;
padding: 1rem;
}
.dashboard-tab .tab-icon {
margin-bottom: 0.5rem;
}
.processes-grid {
grid-template-columns: 1fr;
}
.section-header {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.history-item {
flex-direction: column;
}
.history-date {
align-self: flex-start;
margin-right: 0;
margin-bottom: 1rem;
}
.upload-card {
padding: 2rem 1rem;
}
.dashboard-content {
padding: 1rem;
}
.login-form-wrap {
padding: 2rem;
}
.dashboard-header {
text-align: center;
}
.dashboard-header .row {
flex-direction: column;
gap: 1rem;
}
}
/* ================================================
Estilos da Página de Serviços - Grupo ESCF
================================================ */
/* ESCF Subsite Cards */
.escf-subsite-card {
background: var(--escf-white);
border-radius: 12px;
padding: 30px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
text-align: center;
position: relative;
overflow: hidden;
}
.escf-subsite-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, var(--escf-dark-green) 0%, var(--escf-light-green) 100%);
}
.escf-subsite-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(1, 80, 35, 0.15);
}
.escf-subsite-card .card-icon {
margin-bottom: 20px;
}
.escf-subsite-card .card-title {
color: var(--escf-dark-green);
font-size: 24px;
font-weight: 700;
margin-bottom: 15px;
}
.escf-subsite-card .card-desc {
color: #666;
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.escf-subsite-card .card-services {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 25px;
}
.service-tag {
background: rgba(1, 80, 35, 0.1);
color: var(--escf-dark-green);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
}
/* ================================================
Modern Front Page Styles - Enhanced Design
================================================ */
/* Modern Hero Section */
.modern-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
overflow: hidden;
padding: 80px 0;
}
.hero-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 5%;
width: 100%;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.hero-content {
flex: 1;
/* max-width: 600px; */
z-index: 2;
}
.hero-badge {
margin-bottom: 2rem;
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.1s;
opacity: 0;
}
.badge-text {
display: inline-block;
background: rgba(50, 183, 74, 0.1);
color: var(--escf-light-green);
padding: 0.5rem 1.5rem;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 1px;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
color: var(--escf-black);
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.2s;
opacity: 0;
}
.hero-title-primary {
display: block;
color: var(--escf-black);
}
.hero-title-secondary {
display: block;
color: var(--escf-light-green);
margin: 0.5rem 0;
position: relative;
}
.hero-title-secondary::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background: var(--escf-light-green);
border-radius: 3px;
}
.hero-description {
font-size: 1.2rem;
color: #666;
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 90%;
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.3s;
opacity: 0;
}
.hero-actions {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.4s;
opacity: 0;
}
.btn-primary-modern {
background: linear-gradient(135deg, var(--escf-dark-green) 0%, var(--escf-light-green) 100%);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(1, 80, 35, 0.2);
position: relative;
overflow: hidden;
}
.btn-primary-modern:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(1, 80, 35, 0.3);
}
.btn-primary-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.btn-primary-modern:hover::before {
left: 100%;
}
.btn-outline-modern {
background: transparent;
color: var(--escf-dark-green);
border: 2px solid var(--escf-dark-green);
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
}
.btn-outline-modern:hover {
background: var(--escf-dark-green);
color: white;
transform: translateY(-3px);
}
.hero-stats-modern {
display: flex;
gap: 2rem;
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.5s;
opacity: 0;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--escf-dark-green);
line-height: 1;
}
.stat-label {
display: block;
font-size: 0.9rem;
color: #666;
margin-top: 0.5rem;
}
.hero-visual {
position: relative;
flex: 1;
max-width: 600px;
height: 500px;
}
.hero-shape {
position: absolute;
border-radius: 20px;
background: linear-gradient(135deg, var(--escf-light-green) 0%, var(--escf-dark-green) 100%);
opacity: 0.1;
animation: float 6s ease-in-out infinite;
}
.shape-1 {
width: 300px;
height: 300px;
top: 50px;
right: 100px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation-delay: 0s;
}
.shape-2 {
width: 200px;
height: 200px;
bottom: 100px;
right: 200px;
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
animation-delay: 1s;
}
.shape-3 {
width: 150px;
height: 150px;
top: 200px;
left: 50px;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
animation-delay: 2s;
}
.hero-image-placeholder {
position: absolute;
width: 80%;
height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
z-index: 2;
animation: fadeIn 0.8s ease forwards, float 8s ease-in-out infinite;
opacity: 0;
animation-delay: 0.6s;
}
.hero-image-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
text-align: center;
z-index: 3;
animation: fadeIn 1s ease forwards, bounce 2s infinite;
opacity: 0;
animation-delay: 1s;
}
.scroll-link {
display: flex;
flex-direction: column;
align-items: center;
color: #666;
text-decoration: none;
transition: all 0.3s ease;
}
.scroll-link:hover {
color: var(--escf-dark-green);
transform: translateY(-5px);
}
.scroll-text {
font-size: 0.9rem;
margin-bottom: 1rem;
letter-spacing: 1px;
}
.scroll-arrow {
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0px);
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Modern About Section */
.modern-about {
padding: 100px 0;
background: white;
position: relative;
}
.modern-about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--escf-light-green), transparent);
}
.section-header {
text-align: left;
margin-bottom: 3rem;
position: relative;
}
.section-header.text-center {
text-align: center;
}
.section-header::after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 50px;
height: 3px;
background: var(--escf-light-green);
border-radius: 3px;
}
.section-header.text-center::after {
left: 50%;
transform: translateX(-50%);
}
.section-subtitle {
display: inline-block;
color: var(--escf-light-green);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 1rem;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--escf-black);
margin-bottom: 1rem;
}
.section-description {
font-size: 1.1rem;
color: #666;
max-width: 700px;
margin: 0 auto 3rem;
}
.about-content {
display: flex;
gap: 4rem;
align-items: center;
}
.about-text {
flex: 1;
}
.about-text p {
font-size: 1.1rem;
color: #555;
line-height: 1.7;
margin-bottom: 2rem;
}
.about-highlights {
margin-bottom: 2rem;
}
.highlight-item {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: rgba(50, 183, 74, 0.03);
border-radius: 15px;
transition: all 0.3s ease;
}
.highlight-item:hover {
transform: translateY(-5px);
background: rgba(50, 183, 74, 0.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.highlight-icon {
width: 60px;
height: 60px;
background: rgba(50, 183, 74, 0.1);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.highlight-item:hover .highlight-icon {
background: var(--escf-light-green);
transform: scale(1.1);
}
.highlight-icon i {
font-size: 1.5rem;
color: var(--escf-light-green);
transition: all 0.3s ease;
}
.highlight-item:hover .highlight-icon i {
color: white;
}
.highlight-content h3 {
font-size: 1.3rem;
color: var(--escf-black);
margin-bottom: 0.5rem;
}
.highlight-content p {
font-size: 1rem;
color: #666;
margin: 0;
line-height: 1.6;
}
.about-visual {
flex: 1;
}
.visual-card {
background: linear-gradient(135deg, rgba(50, 183, 74, 0.05) 0%, rgba(1, 80, 35, 0.05) 100%);
border-radius: 20px;
padding: 2.5rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.visual-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--escf-light-green), var(--escf-dark-green));
}
.visual-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.card-icon {
width: 80px;
height: 80px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.visual-card:hover .card-icon {
transform: scale(1.1) rotate(10deg);
background: var(--escf-light-green);
}
.card-icon i {
font-size: 2rem;
color: var(--escf-light-green);
transition: all 0.3s ease;
}
.visual-card:hover .card-icon i {
color: white;
}
.visual-card h3 {
font-size: 1.5rem;
color: var(--escf-black);
margin-bottom: 1rem;
}
.visual-card p {
font-size: 1rem;
color: #666;
line-height: 1.6;
margin: 0;
}
/* Modern Services Section */
.modern-services {
padding: 100px 0;
background: #f8f9fa;
position: relative;
}
.modern-services::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--escf-light-green), transparent);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
/* gap: 2rem; */
margin-top: 3rem;
}
.service-card-modern {
background: white;
border-radius: 20px;
padding: 2.5rem 2rem;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
}
.service-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--escf-light-green), var(--escf-dark-green));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: -1;
}
.service-card-modern:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.service-card-modern:hover::before {
transform: scaleX(1);
}
.service-card-modern::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(50, 183, 74, 0.03) 0%, rgba(1, 80, 35, 0.03) 100%);
z-index: -2;
opacity: 0;
transition: opacity 0.3s ease;
}
.service-card-modern:hover::after {
opacity: 1;
}
.service-icon {
width: 70px;
height: 70px;
background: rgba(50, 183, 74, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.3s ease;
}
.service-card-modern:hover .service-icon {
background: var(--escf-light-green);
transform: scale(1.1) rotate(10deg);
}
.service-icon i {
font-size: 1.8rem;
color: var(--escf-light-green);
transition: all 0.3s ease;
}
.service-card-modern:hover .service-icon i {
color: white;
}
.service-title {
font-size: 1.4rem;
color: var(--escf-black);
margin-bottom: 1rem;
}
.service-description {
font-size: 1rem;
color: #666;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.service-link {
display: inline-flex;
align-items: center;
color: var(--escf-dark-green);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
padding: 0.5rem 0;
}
.service-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--escf-light-green);
transition: width 0.3s ease;
}
.service-link:hover::after {
width: 100%;
}
.service-link:hover {
color: var(--escf-light-green);
transform: translateX(5px);
}
.service-link i {
margin-left: 0.5rem;
font-size: 0.8rem;
}
/* Modern CTA Section */
.modern-cta {
padding: 100px 0;
background: linear-gradient(135deg, var(--escf-dark-green) 0%, var(--escf-light-green) 100%);
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.modern-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}
.modern-cta::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.cta-content p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 2.5rem;
opacity: 0.9;
}
.btn-large {
padding: 1.2rem 3rem;
font-size: 1.1rem;
}
/* Responsive Design */
@media (max-width: 1199.98px) {
.hero-title {
font-size: 3rem;
}
.hero-container {
padding: 0 3%;
}
.hero-visual {
height: 450px;
}
}
@media (max-width: 991.98px) {
.hero-container {
flex-direction: column;
text-align: center;
padding: 100px 5% 50px;
}
.hero-content {
max-width: 100%;
margin-bottom: 3rem;
}
.hero-description {
max-width: 100%;
margin: 0 auto 2.5rem;
}
.hero-stats-modern {
justify-content: center;
}
.hero-visual {
max-width: 100%;
height: 400px;
}
.about-content {
flex-direction: column;
}
.section-header {
text-align: center;
}
.section-header::after {
left: 50%;
transform: translateX(-50%);
}
.cta-content h2 {
font-size: 2rem;
}
.cta-content p {
font-size: 1.1rem;
}
}
@media (max-width: 767.98px) {
.hero-title {
font-size: 2.2rem;
}
.hero-description {
font-size: 1rem;
}
.hero-actions {
flex-direction: column;
gap: 1rem;
}
.hero-stats-modern {
flex-direction: column;
gap: 1.5rem;
}
.section-title {
font-size: 2rem;
}
.section-description {
font-size: 1rem;
}
.highlight-item {
flex-direction: column;
text-align: center;
}
.visual-card {
padding: 2rem 1.5rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.cta-content h2 {
font-size: 1.8rem;
}
.cta-content p {
font-size: 1rem;
}
}
@media (max-width: 575.98px) {
.modern-hero {
min-height: auto;
padding: 80px 0 40px;
}
.hero-title {
font-size: 1.8rem;
}
.badge-text {
padding: 0.3rem 1rem;
font-size: 0.75rem;
}
.hero-description {
margin-bottom: 2rem;
}
.hero-actions {
margin-bottom: 2rem;
}
.btn-primary-modern,
.btn-outline-modern {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
.modern-about,
.modern-services,
.modern-cta {
padding: 60px 0;
}
.visual-card {
padding: 1.5rem;
}
.service-card-modern {
padding: 2rem 1.5rem;
}
.cta-content h2 {
font-size: 1.5rem;
}
}
/* Modern background for Services section */
.service-area-1 {
position: relative;
overflow: hidden;
/* background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); */
padding: 120px 0 100px 0;
}
.service-area-1::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
z-index: 0;
}
.service-area-1 .container {
position: relative;
z-index: 1;
}
/* Remove the old background element */
.service-bg1-1 {
display: none;
}
/* Section title improvements */
.service-area-1 .section__title {
margin-bottom: 60px;
}
.service-area-1 .section__title .sub-title {
color: var(--escf-dark-green);
font-weight: 600;
letter-spacing: 1px;
}
.service-area-1 .section__title .title {
color: var(--escf-black);
font-weight: 700;
margin-top: 10px;
}
/* Service cards modernization */
.service-card {
border-radius: 12px;
overflow: hidden;
transition: all 0.4s ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
background: var(--escf-white);
height: 100%;
border: 1px solid rgba(1, 80, 35, 0.08);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(1, 80, 35, 0.12);
border-color: rgba(1, 80, 35, 0.15);
}
.service-card .box-content {
padding: 35px;
background: transparent;
}
.service-card .box-icon {
margin-bottom: 25px;
padding-top: 0;
}
.service-card .box-icon:after {
display: none;
}
.service-card .box-icon svg {
width: 50px;
height: 50px;
}
.service-card .box-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.4;
}
.service-card .box-title a {
color: var(--escf-heading-color);
transition: color 0.3s ease;
}
.service-card .box-title a:hover {
color: var(--escf-dark-green);
}
.service-card .box-text {
color: #666;
font-size: 16px;
line-height: 1.6;
margin-bottom: 25px;
}
.service-card .box-img {
position: relative;
overflow: hidden;
}
.service-card .box-img img {
transition: all 0.5s ease;
width: 100%;
height: 200px;
object-fit: cover;
}
.service-card .box-img .tg-button-wrap {
position: absolute;
left: 30px;
right: 30px;
bottom: 30px;
transform: scaleX(1);
opacity: 0;
transition: all 0.4s ease;
z-index: 2;
}
.service-card:hover .box-img .tg-button-wrap {
opacity: 1;
transform: translateY(-10px);
}
.service-card .box-img .tg-button-wrap .btn {
background: var(--escf-white);
color: var(--escf-dark-green);
border: 2px solid var(--escf-white);
font-weight: 600;
padding: 12px 25px;
border-radius: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.service-card .box-img .tg-button-wrap .btn:hover {
background: transparent;
color: var(--escf-white);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.service-card .box-img .tg-button-wrap .btn i {
margin-left: 8px;
transition: transform 0.3s ease;
}
.service-card .box-img .tg-button-wrap .btn:hover i {
transform: translateX(3px);
}
.service-card:hover .box-img img {
transform: scale(1.05);
filter: brightness(0.9);
}
/* Responsive adjustments */
@media (max-width: 1199.98px) {
.service-card .box-content {
padding: 30px;
}
.service-card .box-title {
font-size: 20px;
}
}
@media (max-width: 991.98px) {
.service-area-1 {
padding: 100px 0 80px 0;
}
.service-card .box-img .tg-button-wrap {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 767.98px) {
.service-area-1 {
padding: 80px 0 60px 0;
}
.service-area-1 .section__title {
margin-bottom: 40px;
}
.service-card .box-content {
padding: 25px;
}
.contact-options {
flex-direction: column;
gap: 15px;
}
.cta-actions {
align-items: center;
}
.imobiliaria-services .service-item {
flex-direction: column;
text-align: center;
}
.escf-subsite-card {
padding: 20px;
}
.cta-card {
padding: 30px 20px;
}
}
/* Scroll smooth para links internos */
.scroll-link {
scroll-behavior: smooth;
}
/* Animações de entrada */
.escf-subsite-card,
.course-card,
.property-card,
.cta-card {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
}
.escf-subsite-card:nth-child(1) { animation-delay: 0.1s; }
.escf-subsite-card:nth-child(2) { animation-delay: 0.2s; }
.escf-subsite-card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Melhorias de acessibilidade */
.btn:focus,
.service-tab:focus,
.contact-option:focus {
outline: 2px solid var(--escf-light-green);
outline-offset: 2px;
}
/* Otimizações de performance */
.escf-subsite-card,
.course-card,
.property-card,
.cta-card {
will-change: transform;
backface-visibility: hidden;
}
/* ================================================
Estilos do Blog Fiscal - Centro de Conhecimento
================================================ */
/* Blog Hero Section */
.blog-hero {
position: relative;
overflow: hidden;
}
.blog-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.blog-hero-content {
position: relative;
z-index: 2;
}
.search-box, .subscribe-box {
position: relative;
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 50px;
padding: 8px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.search-box .form-control,
.subscribe-box .form-control {
background: transparent;
border: none;
color: var(--escf-white);
padding: 12px 20px;
flex: 1;
}
.search-box .form-control::placeholder,
.subscribe-box .form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.search-btn, .subscribe-btn {
background: var(--escf-white);
color: var(--escf-dark-green);
border: none;
padding: 12px 20px;
border-radius: 40px;
font-weight: 600;
transition: all 0.3s ease;
white-space: nowrap;
}
.search-btn:hover, .subscribe-btn:hover {
background: var(--escf-light-green);
color: var(--escf-white);
transform: translateY(-2px);
}
.blog-stats {
display: flex;
justify-content: center;
gap: 60px;
}
.stat-item {
text-align: center;
}
.stat-number {
color: var(--escf-white);
font-size: 32px;
font-weight: 700;
margin-bottom: 8px;
display: block;
}
.stat-label {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
margin: 0;
}
/* Newsletter Section */
.newsletter-benefits {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 20px;
}
.benefit-item {
display: flex;
align-items: center;
gap: 12px;
color: #666;
font-size: 14px;
}
.newsletter-privacy {
color: #999;
font-size: 12px;
text-align: center;
margin-top: 10px;
margin-bottom: 0;
}
/* Featured Articles */
.featured-article-card {
background: var(--escf-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.featured-article-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(1, 80, 35, 0.15);
}
.featured-article-card .article-image {
position: relative;
height: 300px;
overflow: hidden;
}
.featured-article-card .article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.featured-article-card:hover .article-image img {
transform: scale(1.05);
}
.featured-badge {
position: absolute;
top: 20px;
left: 20px;
background: var(--escf-light-green);
color: var(--escf-white);
padding: 8px 15px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.article-category-badge {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
color: var(--escf-white);
padding: 6px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.featured-article-card .article-content {
padding: 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.article-meta {
display: flex;
gap: 20px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.article-meta span {
color: #999;
font-size: 13px;
display: flex;
align-items: center;
gap: 5px;
}
.article-title {
color: var(--escf-dark-green);
font-size: 24px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 15px;
}
.article-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.article-highlights {
background: #f8f9fa;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
.article-highlights h5 {
color: var(--escf-dark-green);
font-size: 16px;
font-weight: 600;
margin-bottom: 10px;
}
.article-highlights ul {
margin: 0;
padding-left: 20px;
}
.article-highlights li {
color: #666;
margin-bottom: 5px;
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 25px;
}
.tag {
background: rgba(1, 80, 35, 0.1);
color: var(--escf-dark-green);
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
}
.article-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.article-share {
display: flex;
align-items: center;
gap: 10px;
}
.article-share span {
color: #999;
font-size: 13px;
}
.share-btn {
width: 35px;
height: 35px;
background: #f8f9fa;
color: #666;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
}
.share-btn:hover {
background: var(--escf-light-green);
color: var(--escf-white);
transform: translateY(-2px);
}
/* Side Articles */
.side-articles {
display: flex;
flex-direction: column;
gap: 25px;
}
.side-article-card {
background: var(--escf-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.side-article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 35px rgba(1, 80, 35, 0.12);
}
.side-article-card .article-image {
position: relative;
height: 150px;
overflow: hidden;
}
.side-article-card .article-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.side-article-card .article-content {
padding: 20px;
}
.side-article-card h4 {
color: var(--escf-dark-green);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 10px;
}
.side-article-card p {
color: #666;
font-size: 14px;
line-height: 1.5;
margin-bottom: 15px;
}
.read-more-link {
color: var(--escf-light-green);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: all 0.3s ease;
}
.read-more-link:hover {
color: var(--escf-dark-green);
text-decoration: none;
}
/* Category Cards Modern */
.category-card-modern {
background: var(--escf-white);
border-radius: 16px;
padding: 30px;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.category-card-modern:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(1, 80, 35, 0.15);
border-color: var(--escf-light-green);
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.category-card-modern .category-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--escf-dark-green) 0%, var(--escf-light-green) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--escf-white);
font-size: 24px;
}
.category-stats {
text-align: right;
}
.article-count {
color: var(--escf-dark-green);
font-size: 24px;
font-weight: 700;
display: block;
}
.stat-label {
color: #999;
font-size: 12px;
text-transform: uppercase;
}
.category-content {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.category-card-modern h3 {
color: var(--escf-dark-green);
font-size: 20px;
font-weight: 700;
margin-bottom: 15px;
line-height: 1.3;
}
.category-card-modern p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.category-topics {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 25px;
}
.topic-tag {
background: rgba(1, 80, 35, 0.1);
color: var(--escf-dark-green);
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.category-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.last-update {
color: #999;
font-size: 12px;
}
.category-link {
color: var(--escf-light-green);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.category-link:hover {
color: var(--escf-dark-green);
text-decoration: none;
}
/* Blog Filters */
.blog-filters {
background: var(--escf-white);
padding: 25px;
border-radius: 12px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}
.filter-tabs {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.filter-btn {
background: #f8f9fa;
color: #666;
border: none;
padding: 12px 20px;
border-radius: 25px;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
}
.filter-btn.active,
.filter-btn:hover {
background: var(--escf-dark-green);
color: var(--escf-white);
transform: translateY(-2px);
}
.filter-select {
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 12px 15px;
font-size: 14px;
}
/* Modern Article Cards */
.article-card-modern {
background: var(--escf-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.article-card-modern:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(1, 80, 35, 0.15);
}
.article-card-modern .article-image {
position: relative;
height: 250px;
overflow: hidden;
}
.article-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, transparent 100%);
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 20px;
}
.article-actions {
display: flex;
gap: 8px;
}
.action-btn {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
color: #666;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
backdrop-filter: blur(10px);
}
.action-btn:hover {
background: var(--escf-light-green);
color: var(--escf-white);
transform: scale(1.1);
}
.article-card-modern .article-content {
padding: 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.article-card-modern .article-title a {
color: var(--escf-dark-green);
text-decoration: none;
transition: color 0.3s ease;
}
.article-card-modern .article-title a:hover {
color: var(--escf-light-green);
}
.article-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.author-info {
display: flex;
align-items: center;
gap: 10px;
}
.author-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
object-fit: cover;
}
.author-name {
color: #666;
font-size: 13px;
font-weight: 600;
}
.read-more-btn {
color: var(--escf-light-green);
font-weight: 600;
font-size: 13px;
text-decoration: none;
transition: all 0.3s ease;
}
.read-more-btn:hover {
color: var(--escf-dark-green);
text-decoration: none;
}
/* Author Cards Modern */
.author-card-modern {
background: var(--escf-white);
border-radius: 16px;
padding: 30px;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
text-align: center;
}
.author-card-modern:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(1, 80, 35, 0.15);
}
.author-header {
position: relative;
margin-bottom: 20px;
}
.author-card-modern .author-image {
width: 100px;
height: 100px;
margin: 0 auto 15px;
position: relative;
}
.author-card-modern .author-image img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--escf-light-green);
}
.author-badge {
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
background: var(--escf-light-green);
color: var(--escf-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.author-social {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.social-link {
width: 35px;
height: 35px;
background: #f8f9fa;
color: #666;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.social-link:hover {
background: var(--escf-light-green);
color: var(--escf-white);
transform: translateY(-2px);
}
.author-name {
color: var(--escf-dark-green);
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
}
.author-role {
color: var(--escf-light-green);
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
}
.author-bio {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
flex-grow: 1;
}
.author-specialties {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 20px;
}
.specialty-tag {
background: rgba(1, 80, 35, 0.1);
color: var(--escf-dark-green);
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.author-stats {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
}
.author-stats .stat-item {
text-align: center;
}
.author-stats .stat-number {
color: var(--escf-dark-green);
font-size: 18px;
font-weight: 700;
display: block;
}
.author-stats .stat-label {
color: #999;
font-size: 11px;
text-transform: uppercase;
}
.author-link {
color: var(--escf-light-green);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
margin-top: auto;
}
.author-link:hover {
color: var(--escf-dark-green);
text-decoration: none;
}
/* Blog CTA */
.blog-cta {
position: relative;
overflow: hidden;
}
.blog-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
pointer-events: none;
}
.cta-title {
color: var(--escf-white);
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
}
.cta-desc {
font-size: 16px;
margin-bottom: 25px;
}
.cta-features {
display: flex;
flex-direction: column;
gap: 12px;
}
.cta-features .feature-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.9);
}
.cta-features .feature-item i {
color: var(--escf-white);
font-size: 16px;
}
.cta-actions {
display: flex;
flex-direction: column;
gap: 15px;
}
/* Load More Section */
.load-more-section {
margin-top: 60px;
}
.load-more-info {
color: #999;
font-size: 14px;
margin-top: 15px;
margin-bottom: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.blog-hero {
padding: 60px 0;
}
.blog-stats {
gap: 30px;
}
.stat-number {
font-size: 24px;
}
.search-box, .subscribe-box {
flex-direction: column;
border-radius: 12px;
padding: 15px;
}
.search-btn, .subscribe-btn {
width: 100%;
margin-top: 10px;
border-radius: 8px;
}
.filter-tabs {
justify-content: center;
}
.filter-btn {
padding: 10px 15px;
font-size: 13px;
}
.featured-article-card .article-image {
height: 200px;
}
.article-meta {
justify-content: center;
}
.article-actions {
flex-direction: column;
gap: 15px;
align-items: center;
}
.category-card-modern {
padding: 20px;
}
.category-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 15px;
}
.author-card-modern {
padding: 20px;
}
.cta-title {
font-size: 22px;
}
.cta-actions {
margin-top: 30px;
}
}
/* Animation Classes */
.fade-in {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.6s ease forwards;
}
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Notification Styles (for JavaScript notifications) */
.blog-notification {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.notification-content {
display: flex;
align-items: center;
gap: 12px;
}
.notification-close {
background: none;
border: none;
color: currentColor;
cursor: pointer;
padding: 5px;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.notification-close:hover {
opacity: 1;
}
/* ================================
Simple & Beautiful Hero Section
================================ */
/* Hero Container */
.hero-wrapper {
position: relative;
height: 100vh;
min-height: 600px;
}
/* Hero Slides */
.hero-wrapper .swiper-slide {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-wrapper .swiper-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.hero-wrapper .container {
position: relative;
z-index: 2;
}
/* Hero Badge */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 8px 16px;
border-radius: 25px;
margin-bottom: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-badge i {
color: var(--escf-light-green);
font-size: 1rem;
}
.hero-badge span {
color: white;
font-weight: 500;
font-size: 0.9rem;
}
/* Hero Title */
.hero-title {
font-size: 3.5rem;
font-weight: 700;
color: white;
line-height: 1.2;
margin-bottom: 24px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* Hero Text */
.hero-text {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 32px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Modern Hero Stats Cards */
.hero-stats, .hero-stats-simple {
display: flex;
justify-content: left;
gap: 20px;
margin-bottom: 48px;
flex-wrap: wrap;
}
.stat-item {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 20px 0 9px;
text-align: center;
color: white;
min-width: 120px;
flex: 1;
max-width: 150px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--escf-light-green);
border-radius: 12px 12px 0 0;
}
.stat-item:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.12);
border-color: rgba(50, 183, 74, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.stat-item strong, .stat-number {
display: block;
font-size: 1.5rem;
font-weight: 600;
color: white;
margin-bottom: 8px;
line-height: 1;
}
.stat-item span:not(.stat-number), .stat-text {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
letter-spacing: 0.5px;
}
/* Modern Hero Content */
.hero-content-simple {
position: relative;
z-index: 3;
padding-top: 3rem;
}
.hero-badge-simple {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(12px);
padding: 10px 20px;
border-radius: 30px;
margin-bottom: 24px;
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
font-size: 0.9rem;
font-weight: 500;
}
.hero-badge-simple i {
color: var(--escf-light-green);
font-size: 1rem;
}
.hero-title-simple {
font-size: 4.2rem;
font-weight: 800;
color: white !important;
line-height: 1.3;
margin-bottom: 24px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.text-highlight {
color: var(--escf-light-green);
position: relative;
}
.hero-description-simple {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 40px;
max-width: 760px;
}
/* Modern Hero Buttons */
.hero-buttons, .hero-buttons-simple {
display: flex;
gap: 16px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.hero-buttons .btn, .hero-buttons-simple .btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border: 2px solid transparent;
font-size: 1rem;
}
.btn-primary-simple {
background: var(--escf-light-green);
color: white;
border-color: var(--escf-light-green);
}
.btn-primary-simple:hover {
background: var(--escf-dark-green);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(50, 183, 74, 0.4);
}
.btn-outline-simple {
background: rgba(255, 255, 255, 0.1);
color: white;
border-color: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.btn-outline-simple:hover {
background: white;
color: var(--escf-green-primary);
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(255, 255, 255, 0.3);
}
/* Hero Overlays - Uniform */
.hero-overlay-simple {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
}
/* Hero Visual */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
opacity: 0.6;
margin-top: 24px;
}
.hero-visual i {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Nova Paginação Elegante do Hero */
.hero-elegant-pagination {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 20px;
z-index: 50;
pointer-events: auto;
visibility: visible !important;
opacity: 1 !important;
padding: 15px 10px;
overflow: visible;
user-select: none;
}
.pagination-dot {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
opacity: 0.7;
pointer-events: auto;
z-index: 9999;
padding: 15px; /* Aumentado para área de clique maior */
margin: -15px; /* Ajustado para compensar o padding */
user-select: none;
}
.pagination-dot:hover {
opacity: 1;
transform: translateX(-10px);
}
.pagination-dot.active {
opacity: 1;
transform: translateX(-15px);
}
.dot-number {
min-width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
z-index: 9999;
animation: pulse-dot 2s infinite;
user-select: none;
pointer-events: auto;
}
.dot-number::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--escf-light-green), var(--escf-dark-green));
opacity: 0;
transition: all 0.4s ease;
border-radius: 50%;
}
.dot-label {
margin-left: 15px;
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
opacity: 0;
transform: translateX(-10px);
transition: all 0.4s ease;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.pagination-dot:hover .dot-number {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(50, 183, 74, 0.6);
color: #ffffff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
/* Add a subtle scale effect on hover */
transform: scale(1.05);
animation: none; /* Remove pulse on hover */
}
.pagination-dot:hover .dot-number::before {
opacity: 0.2;
}
/* Texto do dot só no hover removido - aparece apenas quando ativo */
.pagination-dot.active .dot-number {
background: rgba(255, 255, 255, 0.2);
border-color: var(--escf-light-green);
color: #ffffff;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.4),
0 0 30px rgba(50, 183, 74, 0.4);
/* Add a subtle pulse animation to indicate active state */
animation: pulse-pagination 2s infinite;
}
.pagination-dot.active .dot-number::before {
opacity: 0.3;
}
.pagination-dot.active .dot-label {
opacity: 1;
transform: translateX(0);
color: var(--escf-light-green);
}
@keyframes pulse-dot {
0%, 100% {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}
}
@keyframes pulse-pagination {
0%, 100% {
box-shadow:
0 0 20px rgba(50, 183, 74, 0.6),
0 0 40px rgba(50, 183, 74, 0.3),
inset 0 0 10px rgba(255, 255, 255, 0.2);
}
50% {
box-shadow:
0 0 30px rgba(50, 183, 74, 0.8),
0 0 60px rgba(50, 183, 74, 0.5),
inset 0 0 15px rgba(255, 255, 255, 0.3);
}
}
/* Hero Navigation Arrows */
.hero-navigation {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding: 0 40px;
z-index: 10;
pointer-events: none;
}
.hero-nav-btn {
pointer-events: all;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.hero-nav-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100%;
height: 100%;
background: radial-gradient(circle, var(--escf-light-green) 0%, transparent 70%);
border-radius: 50%;
transition: all 0.4s ease;
z-index: -1;
}
.hero-nav-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(50, 183, 74, 0.4);
color: #ffffff;
transform: scale(1.1);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.2),
0 0 20px rgba(50, 183, 74, 0.3);
}
.hero-nav-btn:hover::before {
transform: translate(-50%, -50%) scale(1);
}
.hero-nav-btn:active {
transform: scale(0.95);
}
.hero-nav-btn i {
transition: all 0.3s ease;
z-index: 2;
position: relative;
}
.hero-nav-btn:hover i {
transform: scale(1.1);
}
/* Modern Scroll Down Button */
.hero-scroll-down {
position: absolute;
bottom: 35px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.appointment-modal .btn-primary:hover {
background: #5da143;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
color: #0b2509 !important;
}
.scroll-down-btn {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: white;
transition: all 0.3s ease;
}
.scroll-down-btn:hover {
color: var(--escf-light-green);
transform: translateY(-5px);
}
.scroll-mouse {
width: 24px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 12px;
position: relative;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.scroll-down-btn:hover .scroll-mouse {
border-color: var(--escf-light-green);
}
.scroll-wheel {
width: 3px;
height: 8px;
background: rgba(255, 255, 255, 0.8);
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
animation: scroll-wheel 2s infinite;
}
.scroll-down-btn:hover .scroll-wheel {
background: var(--escf-light-green);
}
@keyframes scroll-wheel {
0% { top: 8px; opacity: 1; }
50% { top: 20px; opacity: 0.5; }
100% { top: 8px; opacity: 1; }
}
.scroll-arrows {
display: flex;
flex-direction: column;
gap: 2px;
margin-bottom: 8px;
}
.scroll-arrows span {
width: 12px;
height: 2px;
background: rgba(255, 255, 255, 0.6);
display: block;
animation: scroll-arrows 2s infinite;
transition: all 0.3s ease;
}
.scroll-down-btn:hover .scroll-arrows span {
background: var(--escf-light-green);
}
.scroll-arrows span:nth-child(1) { animation-delay: 0s; }
.scroll-arrows span:nth-child(2) { animation-delay: 0.2s; }
.scroll-arrows span:nth-child(3) { animation-delay: 0.4s; }
@keyframes scroll-arrows {
0%, 100% { opacity: 0.4; transform: translateY(0); }
50% { opacity: 1; transform: translateY(3px); }
}
.scroll-text {
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.8;
}
/* Modern Responsive Design */
@media (max-width: 768px) {
.hero-title, .hero-title-simple {
font-size: 3.2rem;
}
.hero-text, .hero-description-simple {
font-size: 1.1rem;
}
.hero-stats, .hero-stats-simple {
gap: 16px;
}
.stat-item {
min-width: 100px;
padding: 18px 14px;
}
.stat-item strong, .stat-number {
font-size: 1.3rem;
}
.hero-buttons, .hero-buttons-simple {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.hero-buttons .btn, .hero-buttons-simple .btn {
width: 100%;
justify-content: center;
max-width: 280px;
}
}
@media (max-width: 480px) {
.hero-title, .hero-title-simple {
font-size: 2.6rem;
}
.hero-description-simple {
font-size: 1rem;
max-width: 100%;
}
.hero-badge-simple {
font-size: 0.8rem;
padding: 8px 16px;
}
.hero-stats, .hero-stats-simple {
gap: 12px;
}
.stat-item {
min-width: 90px;
padding: 16px 12px;
}
.stat-item strong, .stat-number {
font-size: 1.2rem;
}
.stat-item span:not(.stat-number), .stat-text {
font-size: 0.8rem;
}
.hero-buttons .btn, .hero-buttons-simple .btn {
padding: 14px 24px;
font-size: 0.9rem;
}
/* Responsive pagination and scroll */
.slider-pagination2.hero-pagination-simple {
right: 20px;
gap: 8px;
}
.slider-pagination2.hero-pagination-simple .swiper-pagination-bullet {
width: 5px;
height: 5px;
}
.slider-pagination2.hero-pagination-simple .swiper-pagination-bullet::before {
width: 16px;
height: 16px;
}
.slider-pagination2.hero-pagination-simple .swiper-pagination-bullet-active {
width: 10px;
height: 10px;
}
.slider-pagination2.hero-pagination-simple .swiper-pagination-bullet:hover {
width: 8px;
height: 8px;
}
/* Navigation responsive */
.hero-navigation {
padding: 0 20px;
}
.hero-nav-btn {
width: 40px;
height: 40px;
font-size: 14px;
}
.hero-scroll-down {
bottom: 20px;
}
.scroll-mouse {
width: 20px;
height: 32px;
}
.scroll-wheel {
width: 2px;
height: 6px;
top: 6px;
}
.scroll-text {
font-size: 0.7rem;
}
}
/* Simple fade in animation */
.stat-item {
opacity: 0;
animation: fadeIn 0.8s ease forwards;
}
.stat-item:nth-child(1) { animation-delay: 0.2s; }
.stat-item:nth-child(2) { animation-delay: 0.4s; }
.stat-item:nth-child(3) { animation-delay: 0.6s; }
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* Responsivo para Nova Paginação Elegante */
@media (max-width: 768px) {
.hero-elegant-pagination {
right: 20px;
gap: 15px;
/* Increase visibility on mobile */
opacity: 1 !important;
background: rgba(0, 0, 0, 0.3);
padding: 12px 8px;
/* Garantir que menu mobile fique acima */
z-index: 50;
}
.dot-number {
min-width: 35px;
height: 35px;
font-size: 12px;
}
.dot-label {
font-size: 10px;
margin-left: 10px;
}
.pagination-dot.active {
transform: translateX(-8px);
}
}
@media (max-width: 480px) {
.hero-elegant-pagination {
right: 15px;
gap: 12px;
padding: 10px 6px;
}
.dot-number {
min-width: 30px;
height: 30px;
font-size: 11px;
}
.dot-label {
font-size: 9px;
margin-left: 8px;
}
.pagination-dot.active {
transform: translateX(-5px);
}
}
/* ================================================
About Section - Credenciais Styling
================================================ */
.credentials-section {
padding: 0;
}
.credentials-section h5 {
color: var(--escf-dark-green);
font-weight: 600;
border-bottom: 2px solid var(--escf-light-green);
padding-bottom: 8px;
margin-bottom: 20px;
}
.credentials-section .list-wrap li {
padding: 12px 0;
border-bottom: 1px solid rgba(1, 80, 35, 0.1);
}
.credentials-section .list-wrap li:last-child {
border-bottom: none;
}
.credentials-section .icon {
background: linear-gradient(135deg, var(--escf-light-green), var(--escf-dark-green));
color: var(--escf-white);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 14px;
}
.credentials-section .icon i {
color: var(--escf-white) !important;
}
/* About Tabs Enhancement */
.about-tabs .nav-link {
font-size: 14px;
padding: 10px 15px;
margin-right: 8px;
border-radius: 6px 6px 0 0;
transition: all 0.3s ease;
}
.about-tabs .nav-link.active {
background: var(--escf-dark-green);
color: var(--escf-white);
border-color: var(--escf-dark-green);
}
.about-tabs .nav-link:hover:not(.active) {
background: rgba(1, 80, 35, 0.1);
color: var(--escf-dark-green)!important;
}
/* Tab Content Styling */
.tab-content {
background: rgba(255, 255, 255, 0.05);
padding: 25px;
border-radius: 0 8px 8px 8px;
border: 1px solid rgba(1, 80, 35, 0.1);
}
/* Mobile responsiveness for about tabs */
@media (max-width: 768px) {
.about-tabs {
flex-wrap: wrap;
margin-bottom: 0;
}
.about-tabs .nav-link {
font-size: 12px;
padding: 8px 10px;
margin: 2px;
flex: 1;
text-align: center;
}
.tab-content {
padding: 20px 15px;
}
.credentials-section .icon {
width: 28px;
height: 28px;
font-size: 12px;
margin-right: 12px;
}
}