/* TransaCash Custom Landing Page Styles */
/* Black and White Color Scheme with Scroll Effects */

/* Hide testimonials section as requested */
.gtco-testimonials {
    display: none !important;
}

/* ===== COLOR OVERRIDE - BLACK & WHITE THEME ===== */
:root {
    --tc-primary: #000000;
    --tc-secondary: #333333;
    --tc-accent: #000000;
    --tc-light: #ffffff;
    --tc-gray: #666666;
    --tc-light-gray: #f8f8f8;
    --tc-border: #e0e0e0;
}

/* GLOBAL WHITE BACKGROUND - Force all sections to white */
body,
#main,
main,
.main-content,
section,
div[class*="section"],
div[class*="sec"],
.px-240,
.container,
.container-fluid {
    background-color: #ffffff !important;
}

/* Override color classes */
.color-FE, .color-FF {
    color: #000000 !important;
}

.color-05B, .color-5B {
    color: #000000 !important;
}

.color-B87, .color-B87r {
    color: #333333 !important;
}

/* Background overrides - comprehensive list */
.bg-ligt-pink,
.bg-light-pink,
.bg-dark,
.bg-primary,
.bg-secondary {
    background-color: #ffffff !important;
}

.get-section,
.get-section .px-240,
.get-section .row,
.get-section > div {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* What you get section - force white background */
.get-section {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
}

/* Text in what you get section should be black */
.get-section p,
.get-section h1,
.get-section h2,
.get-section h3,
.get-section h4,
.get-section h5,
.get-section span {
    color: #000000 !important;
}

.get-section .gilroy-light,
.get-section .gilroy-medium {
    color: #333333 !important;
}

.provide-sec {
    background-color: #f8f8f8 !important;
    background: #f8f8f8 !important;
}

.third-section {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Benefits section */
.bg-ligt-pink,
.benefits-section,
[class*="benefit"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Services section */
.provide-sec,
.services-section,
[class*="service"] {
    background-color: #f8f8f8 !important;
    background: #f8f8f8 !important;
}

/* How it works / Process section */
.third-section,
.process-section,
[class*="process"],
[class*="how-it-works"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Crypto section */
[class*="crypto"],
.crypto-section {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* FAQ section */
#faq,
.faq-section,
[class*="faq"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Override any dark backgrounds */
[style*="background-color: #1C1C3A"],
[style*="background-color: #2D2D5A"],
[style*="background-color: rgb(28, 28, 58)"],
[style*="background: #1C1C3A"],
[style*="background: #2D2D5A"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Override dark theme classes commonly used */
.dark-bg,
.bg-dark-blue,
.bg-purple,
.bg-gradient-dark,
.dark-section,
.darkmode {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* ===== FORCE OVERRIDE DARK MODE ===== */
/* Override body.dark backgrounds to white */
body.dark,
body.dark #main,
body.dark main {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

body.dark .get-section,
body.dark .bg-ligt-pink,
body.dark .provide-sec,
body.dark .third-section,
body.dark .gtco-testimonials,
body.dark .dark-app {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Dark mode text colors - force to black */
body.dark .color-FE,
body.dark .color-FF {
    color: #000000 !important;
}

body.dark .color-05B,
body.dark .color-5B {
    color: #000000 !important;
}

body.dark .gilroy-light,
body.dark .gilroy-medium,
body.dark .gilroy-Semibold {
    color: #333333 !important;
}

/* Dark mode cards - force white background */
body.dark .white-shad,
body.dark .gray-shad {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

/* Dark mode navigation */
body.dark .navigation-wrap {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

body.dark .nav-link {
    color: #000000 !important;
}

/* Dark mode footer - keep dark */
body.dark .footer-sec,
body.dark .bottom-footer {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Dark mode FAQ */
body.dark #main #faq .accordion-item .accordion-header .btn-header-link,
body.dark #main #faq .accordion-item .accordion-header .btn-header-link.collapsed {
    background: #ffffff !important;
    color: #000000 !important;
}

body.dark .accordion .accordion-body,
body.dark .accordion-item {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #333333 !important;
}

body.dark #main #faq .accordion-item {
    border: 1px solid #e0e0e0 !important;
}

/* Dark mode buttons */
body.dark .learn-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.dark .bgd-blue {
    background-color: #000000 !important;
}

body.dark .path-yellow,
body.dark .path-blue {
    fill: #000000 !important;
}

/* Dark mode app section */
body.dark .bg-app {
    background-color: #000000 !important;
    background-image: none !important;
}

/* Override all section text colors in dark mode */
body.dark p,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark span,
body.dark label {
    color: #333333 !important;
}

body.dark .get-section p,
body.dark .get-section h1,
body.dark .get-section h2,
body.dark .get-section h3,
body.dark .get-section span,
body.dark .bg-ligt-pink p,
body.dark .bg-ligt-pink h1,
body.dark .bg-ligt-pink h2,
body.dark .bg-ligt-pink h3,
body.dark .bg-ligt-pink span {
    color: #000000 !important;
}

/* Footer text should stay white */
body.dark .footer-sec p,
body.dark .footer-sec h1,
body.dark .footer-sec h2,
body.dark .footer-sec h3,
body.dark .footer-sec h4,
body.dark .footer-sec h5,
body.dark .footer-sec span,
body.dark .footer-sec a,
body.dark .bottom-footer p,
body.dark .bottom-footer span,
body.dark .bottom-footer a {
    color: #ffffff !important;
}

/* App section text */
body.dark .bg-app p,
body.dark .bg-app h1,
body.dark .bg-app h2,
body.dark .bg-app h3,
body.dark .bg-app span {
    color: #ffffff !important;
}

/* Button and accent overrides */
.bgd-blue, .small-border {
    background-color: #000000 !important;
}

.learn-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.learn-btn:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

.button-widths {
    background: #000000 !important;
}

.button-widths:hover {
    background: #333333 !important;
    box-shadow: 0px 21px 25px -11px rgba(0, 0, 0, 0.25) !important;
}

/* Card and box shadows */
.white-shad {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

.white-shad:hover {
    box-shadow: 0px 19px 37px -15px rgba(0, 0, 0, 0.15) !important;
    border-color: #000000 !important;
}

.gray-shad {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

.gray-shad:hover {
    border-color: #000000 !important;
    box-shadow: 0px 15px 30px -10px rgba(0, 0, 0, 0.12) !important;
}

/* SVG path overrides for black theme */
.path-yellow {
    fill: #000000 !important;
}

.path-blue {
    fill: #000000 !important;
}

/* Circle backgrounds in process section */
.circle path[fill="#635BFF"],
.path-yellow {
    fill: #000000 !important;
}

circle[fill="#F2EFFC"] {
    fill: #f0f0f0 !important;
}

/* Accordion styling */
#main #faq .accordion-item {
    border: 1px solid #e0e0e0 !important;
}

#main #faq .accordion-item .accordion-header .btn-header-link {
    background: #ffffff !important;
    color: #000000 !important;
}

#main #faq .accordion-item .accordion-header .btn-header-link.collapsed {
    background: #ffffff !important;
    color: #333333 !important;
}

.accordion-body {
    background: #ffffff !important;
    color: #333333 !important;
}

/* ===== SCROLL ANIMATIONS ===== */

/* Fade in from bottom */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in from left */
.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade in from right */
.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up animation */
.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Staggered animation delays for list items */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Section dividers */
.section-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
    margin: 60px 0;
}

/* Enhanced hover effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Text reveal animation */
.text-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.text-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Counter animation placeholder */
.counter-animate {
    display: inline-block;
}

/* Parallax effect for backgrounds */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Feature card enhancements */
.feature-card {
    position: relative;
    overflow: hidden;
}

.feature-card::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: left 0.5s ease;
}

.feature-card:hover::before {
    left: 100%;
}

/* Hero section adjustments */
.bottom-head {
    background-color: #ffffff !important;
    position: relative;
}

/* Add subtle pattern overlay */
.bottom-head::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.02) 25%, transparent 25%),
                linear-gradient(-135deg, rgba(0,0,0,0.02) 25%, transparent 25%),
                linear-gradient(45deg, rgba(0,0,0,0.02) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(0,0,0,0.02) 25%, transparent 25%);
    background-size: 20px 20px;
    pointer-events: none;
}

/* Process steps enhancement */
.process-step {
    position: relative;
}

.process-step::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: #000000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.process-step:hover::after {
    opacity: 1;
}

/* Footer adjustments */
.footer-sec {
    background-color: #000000 !important;
}

.bottom-footer {
    background-color: #000000 !important;
}

/* App download section */
.dark-app {
    background-color: #f8f8f8 !important;
}

.bg-app {
    background-color: #000000 !important;
    background-image: none !important;
}

/* Navigation enhancements */
.navigation-wrap {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-link {
    color: #000000 !important;
}

.nav-link:hover {
    color: #333333 !important;
}

.log-btn {
    background-color: #000000 !important;
    color: #ffffff !important;
}

.log-btn:hover {
    background-color: #333333 !important;
}

.reg-btn {
    border-color: #000000 !important;
    color: #000000 !important;
}

.reg-btn:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Payment icons - make them grayscale */
.paypal, .visa, .master-card, .coin-payment, .strip {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.paypal:hover, .visa:hover, .master-card:hover, .coin-payment:hover, .strip:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .fade-in-up, .fade-in-left, .fade-in-right, .scale-in {
        transform: none;
        opacity: 1;
    }
    
    .parallax-bg {
        background-attachment: scroll;
    }
}

/* Loading animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-load {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Pulse animation for CTA buttons */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.pulse-animation {
    animation: pulse 2s infinite;
}