/* =========================== DEFAULT (DARK THEME) =========================== */ :root { --bg-color: #0b0f17; --text-color: #dfe6f1; --subtext-color: #9aa5b8; --section-h2: #cbd3df; --card-bg: #111827; --muted-text: #8692a4; --accent-color: #14b8a6; /* teal-400 */ } /* =========================== LIGHT THEME Add class="light" on =========================== */ body.light { --bg-color: #ffffff; --text-color: #1a1a1a; --subtext-color: #4d5562; --section-h2: #1f2937; /* darker for readability */ --card-bg: #f3f4f6; /* light gray */ --muted-text: #6b7280; /* gray-500 */ } /* Apply colors globally */ body { background: var(--bg-color); color: var(--text-color); } section { color: var(--text-color); } p { color: var(--subtext-color); } /* Headings like the ones you styled (#cbd3df) */ section h2 { color: var(--section-h2); } /* Cards */ .card, .service-card { background: var(--card-bg); } .card h3, .service-card h3 { color: var(--section-h2); } .card p, .service-card p { color: var(--muted-text); } /* Buttons automatically stay readable */ .btn-accent { background: var(--accent-color); color: #000; } .benefit-slide { position: absolute; animation: fadeCarousel 17s infinite; } .benefit-slide:nth-child(1) { animation-delay: 0s; } .benefit-slide:nth-child(2) { animation-delay: 5s; } .benefit-slide:nth-child(3) { animation-delay: 10s; } @keyframes fadeCarousel { 0% { opacity: 0; } 8% { opacity: 1; } 33% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } } /* Milk background */ .testimonial-section { background: #f5f3ec; /* light milk color */ } /* Intro text */ .intro-text { max-width: 900px; margin: 0 auto; color: #333; font-size: 17px; } /* Carousel card */ .testimonial-item { background: white; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); min-height: 220px; } /* Testimonial text */ .testimonial-text { font-style: italic; color: #444; font-size: 17px; line-height: 1.6; } /* Client image */ .testimonial-logo { width: 70px; height: 70px; object-fit: contain; } /* Arrow buttons */ .owl-nav button { background: #2c3e50 !important; color: white !important; width: 40px; height: 40px; border-radius: 8px !important; font-size: 20px !important; margin: 10px; } .custom-green { color: #1aaa55; /* bright readable green */ } .custom-green-dark { color: #0d7a3a; /* darker strong green */ } .certificate-btn { background-color: rgb(45 212 191); color: #000; padding: 12px 28px; font-weight: 600; border-radius: 6px; border: none; } .certificate-btn:hover { background-color: rgb(20, 180, 160); color: #000; }