/*
Teamplate Name: themex 
Version: 1.0
*/
/* Type your CSS Here */

/* Logo放大并置于左上角，保持宽高比 */
.trp_nav_area .logo {
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    height: 100%;
}

.trp_nav_area .logo img,
.trp_nav_area .logo a img {
    width: 180px !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: none !important;
    vertical-align: middle;
    object-fit: contain;
}

.mobile_logo_area .logo img,
.mobile_logo_area .logo a img {
    width: 180px !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: none !important;
    object-fit: contain;
}

/* 缩小导航栏滚动时的白色版面 */
.trp_nav_area.hbg2 {
    padding: 0 !important;
    min-height: 35px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
}

.trp_nav_area.hbg2 .logo {
    margin-top: 0 !important;
}

.trp_nav_area.hbg2 .logo img {
    width: 150px !important;
    height: auto !important;
    max-width: 150px !important;
    max-height: none !important;
    object-fit: contain;
}

.trp_nav_area.hbg2 .themex_menu>ul>li>a {
    margin: 8px 6px !important;
    font-size: 13px !important;
    color: #324452 !important;
    line-height: 35px !important;
}

.trp_nav_area.hbg2 .themex_menu.themex_menu2>ul>li>a {
    color: #324452 !important;
}

.trp_nav_area.hbg2 .themex_menu>ul>li>a:hover {
    color: #ff7268 !important;
}

/* 特定页面导航栏字体设置为白色（不影响滚动后的导航栏） */
body.nav-white .trp_nav_area:not(.hbg2) .themex_menu>ul>li>a,
body.nav-white .trp_nav_area:not(.hbg2) .themex_menu.themex_menu2>ul>li>a {
    color: #ffffff !important;
}

body.nav-white .trp_nav_area:not(.hbg2) .themex_menu>ul>li>a:hover {
    color: #ff7268 !important;
}

/* Learn More按钮和图片间距 */
.banner-content .butn {
    margin-bottom: 20px;
}

.banner-content .witr_deshboard {
    margin-top: -30px;
}

/* Privacy Policy 样式 */
#privacy-policy h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 22px;
}

#privacy-policy h2 {
    margin-bottom: 20px;
}

#privacy-policy p {
    margin-bottom: 15px;
    line-height: 1.8;
}

#privacy-policy ul {
    margin: 15px 0;
    line-height: 1.8;
}

#privacy-policy li {
    margin-bottom: 8px;
}

/* Footer样式调整 - 缩小面积高度，灰白色背景，黑色字体 */
.witrfm_area {
    padding: 15px 0 10px 0 !important;
    background: #f5f5f5 !important;
    font-size: 100% !important;
}

.witrfm_area .footer-middle {
    padding: 0 !important;
}

.witrfm_area .footer-middle .row {
    align-items: flex-start;
}

.witrfm_area .widget {
    margin-bottom: 5px !important;
}

.witrfm_area .widget-title,
.witrfm_area h2,
.witrfm_area h3 {
    color: #333 !important;
    margin-top: 0 !important;
    font-size: 100% !important;
}

.witrfm_area .footer-top-content p,
.witrfm_area .menu li a,
.witrfm_area .copy-right-text p,
.witrfm_area .footer-menu ul li a,
.witrfm_area p,
.witrfm_area input,
.witrfm_area button {
    color: #333 !important;
    font-size: 100% !important;
}

.witrfm_area .footer-bottom {
    background: #f5f5f5 !important;
    padding: 15px 0 !important;
    border-top: 1px solid #e0e0e0;
}

/* Remove black overlay from images in features, how-it-works, privacy-policy, contact pages */
.apartment_area::before,
.apartment_area::after,
.wirr_apartment_area::before,
.wirr_apartment_area::after,
.themex_fatura_area .sub-item::before,
.themex_fatura_area .sub-item::after,
.themex_service_content_area::before,
.themex_service_content_area::after,
.apartment_area *::before,
.apartment_area *::after,
.wirr_apartment_area *::before,
.wirr_apartment_area *::after {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
}

/* Remove any dark overlay backgrounds */
.apartment_area,
.wirr_apartment_area {
    background-image: url(../images/contact.jpg) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: relative !important;
}

.apartment_area::before {
    content: none !important;
    display: none !important;
}

/* Remove dark overlay from chart containers in how-it-works */
.chart-container {
    background: transparent !important;
}

.line-chart-container {
    background: #f9f9f9 !important;
}

/* Remove any background overlay that might darken images */
.apartment_area,
.wirr_apartment_area,
.themex_fatura_area,
.themex_service_content_area {
    position: relative !important;
}

/* Ensure no pseudo-elements create dark overlays */
.apartment_area *::before,
.apartment_area *::after {
    background: transparent !important;
    opacity: 0 !important;
}

/* Remove any overlay from features page images */
.themex_fatura_area .sub-item img {
    opacity: 1 !important;
}

/* Footer Top Section Styles */
.footer-top-section {
    background: #f8f9fa !important;
}

.footer-top-section .stat-item {
    transition: transform 0.3s ease;
}

.footer-top-section .stat-item:hover {
    transform: translateY(-5px);
}

.footer-top-section .stat-number {
    transition: color 0.3s ease;
}

.footer-top-section .stat-item:hover .stat-number {
    color: #ff9800 !important;
}

/* Feature页面hover效果 - 浅橘色柔和光 */
.themex_fatura_area .sub-item {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 20px;
}

.themex_fatura_area .sub-item:hover {
    background: rgba(255, 152, 0, 0.08) !important;
    box-shadow: 0 8px 25px rgba(255, 152, 0, 0.15) !important;
    transform: translateY(-5px);
}

.themex_fatura_area .sub-item:hover h3 {
    color: #ff9800 !important;
}

.themex_fatura_area .sub-item:hover .feature-subtitle {
    color: #ff9800 !important;
}

/* How it works动态效果 */
.role-content {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.metric-value {
    animation: countUp 1.5s ease-out;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chart-bar {
    animation: growBar 1.2s ease-out;
    animation-fill-mode: backwards;
}

@keyframes growBar {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.chart-bar:hover {
    background: #1976D2;
    transform: scaleY(1.05);
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
}

/* Circular chart styles for Manager */
.circular-chart {
    animation: fadeInUp 0.6s ease-out;
}

.circular-chart .circle {
    transition: stroke-dashoffset 1.5s ease-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.circular-chart .circle-bg {
    opacity: 0.2;
}

/* Line chart styles for Designer */
.line-chart-container {
    animation: fadeInUp 0.6s ease-out;
}

.line-path {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    animation: drawLine 2.5s ease-out forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.line-point {
    opacity: 0;
    animation: fadeInPoint 0.3s ease-out forwards;
}

.line-point:nth-child(1) { animation-delay: 0.1s; }
.line-point:nth-child(2) { animation-delay: 0.2s; }
.line-point:nth-child(3) { animation-delay: 0.3s; }
.line-point:nth-child(4) { animation-delay: 0.4s; }
.line-point:nth-child(5) { animation-delay: 0.5s; }
.line-point:nth-child(6) { animation-delay: 0.6s; }
.line-point:nth-child(7) { animation-delay: 0.7s; }
.line-point:nth-child(8) { animation-delay: 0.8s; }
.line-point:nth-child(9) { animation-delay: 0.9s; }
.line-point:nth-child(10) { animation-delay: 1.0s; }
.line-point:nth-child(11) { animation-delay: 1.1s; }
.line-point:nth-child(12) { animation-delay: 1.2s; }
.line-point:nth-child(13) { animation-delay: 1.3s; }
.line-point:nth-child(14) { animation-delay: 1.4s; }
.line-point:nth-child(15) { animation-delay: 1.5s; }

@keyframes fadeInPoint {
    to {
        opacity: 1;
    }
}