/* Dark Mode Styles */

body.dark-mode {
  background: #1a1a1a;
  color: #e0e0e0;
}

body.dark-mode a {
  color: #50d8af;
}

body.dark-mode a:hover, 
body.dark-mode a:active, 
body.dark-mode a:focus {
  color: #51d8af;
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
  color: #fff;
}

/* Top Bar Dark Mode */
body.dark-mode #topbar {
  background: #2a2a2a;
  border-bottom: 1px solid #3a3a3a;
}

body.dark-mode #topbar .contact-info a {
  color: #ccc;
}

body.dark-mode #topbar .contact-info a:hover {
  color: #50d8af;
}

body.dark-mode #topbar .social-links a {
  color: #ccc;
  border-left: 1px solid #3a3a3a;
}

body.dark-mode #topbar .social-links a:hover {
  color: #50d8af;
}

/* Header Dark Mode */
body.dark-mode #header {
  background: #2a2a2a;
  box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3);
}

body.dark-mode #header #logo h1 a {
  color: #fff;
}

body.dark-mode #header #logo h1 a span {
  color: #50d8af;
}

/* Navigation Menu Dark Mode */
body.dark-mode .nav-menu a {
  color: #ccc;
}

body.dark-mode .nav-menu li:hover > a, 
body.dark-mode .nav-menu > .menu-active > a {
  color: #50d8af;
}

body.dark-mode .nav-menu ul {
  background: #2a2a2a;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .nav-menu ul li a {
  color: #ccc;
}

body.dark-mode .nav-menu ul li.menu-active > a {
  color: #50d8af;
  background-color: #3a3a3a;
}

body.dark-mode .nav-menu ul li:hover > a {
  color: #50d8af;
  background-color: #3a3a3a;
}

/* Intro Section Dark Mode */
body.dark-mode #intro .intro-content h2 {
  color: #fff;
}

body.dark-mode #intro .intro-content h2 span {
  color: #50d8af;
}

/* Sections Dark Mode */
body.dark-mode section {
  background: #1a1a1a;
  color: #e0e0e0;
}

/* Override specific section IDs with higher specificity */
body.dark-mode #services {
  background: #1a1a1a !important;
}

body.dark-mode #team {
  background: #1a1a1a !important;
}

body.dark-mode #events {
  background: #1a1a1a !important;
}

body.dark-mode #testimonials {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%) !important;
}

body.dark-mode #mission-vision-values {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
}

body.dark-mode #portfolio {
  background: #1a1a1a !important;
}

body.dark-mode #clients {
  background: #1a1a1a !important;
}

body.dark-mode #about {
  background: #1a1a1a !important;
}

body.dark-mode #intro {
  background: #1a1a1a !important;
}

/* Intro Carousel Dark Mode - Remove images, keep black background */
body.dark-mode #intro #intro-carousel .item {
  background-image: none !important;
  background-color: #000000 !important;
}

body.dark-mode #intro #intro-carousel::before {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode #call-to-action {
  background: #0a1628 !important;
}

body.dark-mode #contact {
  background: #1a1a1a !important;
}

body.dark-mode .section-bg {
  background: #2a2a2a;
}

body.dark-mode .section-title h2 {
  color: #fff;
}

body.dark-mode .section-title p {
  color: #ccc;
}

/* Cards and Boxes Dark Mode - High Specificity with IDs */
body.dark-mode #services .box {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}

body.dark-mode #services .box:hover {
  background: #333 !important;
  border-color: #50d8af !important;
}

body.dark-mode .box,
body.dark-mode .card,
body.dark-mode .service-box,
body.dark-mode .portfolio-item,
body.dark-mode .service-card,
body.dark-mode #team .team-member-card,
body.dark-mode .team-member-card,
body.dark-mode #events .event-card,
body.dark-mode .event-card,
body.dark-mode #mission-vision-values .mvv-card,
body.dark-mode .mvv-card,
body.dark-mode #testimonials .testimonial-item,
body.dark-mode .testimonial-item {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}

body.dark-mode .box:hover,
body.dark-mode .card:hover,
body.dark-mode .service-box:hover,
body.dark-mode #services .service-card:hover,
body.dark-mode .service-card:hover,
body.dark-mode #team .team-member-card:hover,
body.dark-mode .team-member-card:hover,
body.dark-mode #events .event-card:hover,
body.dark-mode .event-card:hover,
body.dark-mode #mission-vision-values .mvv-card:hover,
body.dark-mode .mvv-card:hover,
body.dark-mode #testimonials .testimonial-item:hover,
body.dark-mode .testimonial-item:hover {
  background: #333 !important;
  border-color: #50d8af !important;
}

/* Forms Dark Mode */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #e0e0e0;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="tel"]:focus,
body.dark-mode input[type="url"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
  background: #333;
  border-color: #50d8af;
  color: #fff;
}

body.dark-mode input[type="text"]::placeholder,
body.dark-mode input[type="email"]::placeholder,
body.dark-mode input[type="tel"]::placeholder,
body.dark-mode textarea::placeholder {
  color: #888;
}

/* Buttons Dark Mode */
body.dark-mode .btn {
  color: #fff;
}

body.dark-mode .btn-primary {
  background: #0c2e8a;
  border-color: #0c2e8a;
}

body.dark-mode .btn-primary:hover {
  background: #0d3ba8;
  border-color: #0d3ba8;
}

body.dark-mode .btn-success {
  background: #50d8af;
  border-color: #50d8af;
}

body.dark-mode .btn-success:hover {
  background: #45c59f;
  border-color: #45c59f;
}

/* .btn-get-started Dark Mode */
body.dark-mode .btn-get-started {
  background: linear-gradient(135deg, #0c2e8a 0%, #1a4db8 100%);
  border-color: #0c2e8a;
  color: #fff;
}

body.dark-mode .btn-get-started:hover {
  background: linear-gradient(135deg, #1a4db8 0%, #2563eb 100%);
  border-color: #1a4db8;
  color: #fff;
  box-shadow: 0 4px 12px rgba(12, 46, 138, 0.4);
}

body.dark-mode .btn-get-started:active,
body.dark-mode .btn-get-started:focus {
  box-shadow: 0 0 0 0.2rem rgba(12, 46, 138, 0.5);
}

/* Footer Dark Mode */
body.dark-mode #footer {
  background: #1a1a1a;
  border-top: 1px solid #3a3a3a;
  color: #ccc;
}

body.dark-mode #footer .copyright {
  color: #ccc;
}

body.dark-mode #footer .credits a {
  color: #50d8af;
}

body.dark-mode #footer .credits a:hover {
  color: #51d8af;
}

/* Back to Top Button Dark Mode */
body.dark-mode .back-to-top {
  background: #50d8af;
  color: #fff;
}

body.dark-mode .back-to-top:hover {
  background: #0c2e8a;
  color: #fff;
}

/* Testimonials Dark Mode */
body.dark-mode .testimonial-item {
  background: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode .testimonial-item .testimonial-content {
  color: #ccc;
}

/* Team Dark Mode */
body.dark-mode .team-member {
  background: #2a2a2a;
}

body.dark-mode .team-member .member-info h4 {
  color: #fff;
}

body.dark-mode .team-member .member-info span {
  color: #ccc;
}

/* Portfolio Dark Mode */
body.dark-mode .portfolio-item {
  background: #2a2a2a;
}

body.dark-mode .portfolio-item .portfolio-info h4 {
  color: #fff;
}

body.dark-mode .portfolio-item .portfolio-info p {
  color: #ccc;
}

/* Clients Dark Mode */
body.dark-mode .clients-carousel .client-logo {
  filter: brightness(0.8);
}

body.dark-mode .clients-carousel .client-logo:hover {
  filter: brightness(1);
}

/* Events Dark Mode */
body.dark-mode .event-item {
  background: #2a2a2a;
  border-color: #3a3a3a;
}

body.dark-mode .event-item h4 {
  color: #fff;
}

body.dark-mode .event-item p {
  color: #ccc;
}

/* Contact Form Dark Mode */
body.dark-mode .contact-form {
  background: #2a2a2a;
}

body.dark-mode .contact-form .form-group label {
  color: #ccc;
}

/* Owl Carousel Dark Mode */
body.dark-mode .owl-carousel .owl-nav button.owl-prev,
body.dark-mode .owl-carousel .owl-nav button.owl-next {
  background: #2a2a2a;
  color: #fff;
}

body.dark-mode .owl-carousel .owl-nav button.owl-prev:hover,
body.dark-mode .owl-carousel .owl-nav button.owl-next:hover {
  background: #50d8af;
  color: #fff;
}

body.dark-mode .owl-carousel .owl-dots button.owl-dot {
  background: #3a3a3a;
}

body.dark-mode .owl-carousel .owl-dots button.owl-dot.active {
  background: #50d8af;
}

/* General Text Dark Mode */
body.dark-mode p {
  color: #ccc;
}

body.dark-mode .text-muted {
  color: #888 !important;
}

/* Tables Dark Mode */
body.dark-mode table {
  color: #e0e0e0;
}

body.dark-mode table thead {
  background: #2a2a2a;
}

body.dark-mode table tbody tr {
  background: #1a1a1a;
  border-color: #3a3a3a;
}

body.dark-mode table tbody tr:hover {
  background: #2a2a2a;
}

body.dark-mode table td,
body.dark-mode table th {
  border-color: #3a3a3a;
  color: #e0e0e0;
}

/*--------------------------------------------------------------
# Section Headers Dark Mode
--------------------------------------------------------------*/
body.dark-mode .section-header h2 {
  color: #fff;
}

body.dark-mode .section-header p {
  color: #ccc;
}

body.dark-mode .section-header h2::before {
  background: #50d8af;
}

/*--------------------------------------------------------------
# Testimonials Section Dark Mode
--------------------------------------------------------------*/
/* This is already defined at the top, but keeping for organization */

body.dark-mode #testimonials::before {
  background: 
    radial-gradient(circle at 20% 30%, rgba(80, 216, 175, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(12, 46, 138, 0.1) 0%, transparent 50%);
}

body.dark-mode #testimonials .testimonial-item {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode #testimonials .testimonial-item:hover {
  box-shadow: 
    0 12px 40px rgba(80, 216, 175, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.2) !important;
  border-color: rgba(80, 216, 175, 0.5) !important;
  background: #333 !important;
}

body.dark-mode .testimonial-text {
  color: #ccc !important;
}

body.dark-mode .testimonial-text p {
  color: #ccc !important;
}

body.dark-mode .testimonial-quote-icon-large i {
  color: #ffd700 !important;
  opacity: 0.6 !important;
}

body.dark-mode .testimonial-item:hover .testimonial-quote-icon-large i {
  opacity: 0.8 !important;
}

body.dark-mode .testimonial-rating {
  color: #ffc107 !important;
}

body.dark-mode .testimonial-rating .fa-star {
  color: #ffc107 !important;
}

body.dark-mode .testimonial-separator {
  border-top-color: #3a3a3a !important;
}

body.dark-mode .testimonial-author-section {
  border-top-color: #3a3a3a !important;
}

body.dark-mode .testimonial-img {
  border-color: #50d8af !important;
  box-shadow: 0 4px 15px rgba(80, 216, 175, 0.3) !important;
}

body.dark-mode .testimonial-text[data-read-more].truncated::after {
  background: linear-gradient(to bottom, transparent, rgba(42, 42, 42, 0.98));
}

body.dark-mode .testimonial-rating {
  color: #ffc107;
}

body.dark-mode .testimonial-separator {
  border-top-color: #3a3a3a;
}

body.dark-mode .testimonial-author-section {
  border-top-color: #3a3a3a;
}

body.dark-mode #testimonials .testimonial-item h3 {
  color: #fff !important;
}

body.dark-mode #testimonials .testimonial-item:hover h3 {
  color: #50d8af !important;
}

body.dark-mode #testimonials .testimonial-item h4 {
  color: #aaa !important;
}

body.dark-mode .testimonial-company {
  color: #50d8af !important;
}

body.dark-mode .read-more-btn {
  background: #50d8af;
  color: #fff;
}

body.dark-mode .read-more-btn:hover {
  background: #0c2e8a;
  color: #fff;
}

/*--------------------------------------------------------------
# Team Section Dark Mode
--------------------------------------------------------------*/
/* This is already defined at the top, but keeping for organization */

body.dark-mode #team .member {
  background: #2a2a2a !important;
}

body.dark-mode #team .team-member-card,
body.dark-mode .team-member-card {
  background: #2a2a2a !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode #team .team-member-card:hover,
body.dark-mode .team-member-card:hover {
  box-shadow: 0 12px 40px rgba(80, 216, 175, 0.3) !important;
  background: #333 !important;
}

body.dark-mode .team-member-image {
  background: #1a1a1a;
}

body.dark-mode .team-member-banner {
  background: #2a2a2a !important;
  border-top-color: #50d8af !important;
}

body.dark-mode #team .member h4,
body.dark-mode .team-member-banner h4 {
  color: #fff !important;
}

body.dark-mode #team .member span,
body.dark-mode .team-member-position {
  color: #50d8af !important;
}

body.dark-mode #team .member .details {
  background: #2a2a2a !important;
  color: #fff !important;
}

body.dark-mode #team .member .social a {
  color: #50d8af !important;
}

body.dark-mode .social-link {
  background: #3a3a3a;
  border-color: #4a4a4a;
  color: #50d8af;
}

body.dark-mode .social-link:hover {
  background: #50d8af;
  border-color: #50d8af;
  color: #fff;
}

body.dark-mode .team-member-bio-wrapper {
  border-top-color: #3a3a3a;
}

body.dark-mode .team-member-bio {
  color: #ccc !important;
}

body.dark-mode .team-member-bio[data-read-more].truncated::after {
  background: linear-gradient(to bottom, transparent, rgba(42, 42, 42, 0.98));
}

body.dark-mode .team-member-bio-wrapper .read-more-btn {
  background: #50d8af;
  color: #fff;
}

body.dark-mode .team-member-bio-wrapper .read-more-btn:hover {
  background: #0c2e8a;
  color: #fff;
}

/*--------------------------------------------------------------
# Services Section Dark Mode
--------------------------------------------------------------*/
/* This is already defined at the top, but keeping for organization */

body.dark-mode #services .box {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #e0e0e0 !important;
}

body.dark-mode #services .box:hover {
  background: #333 !important;
  border-color: #50d8af !important;
}

body.dark-mode #services .service-card,
body.dark-mode .service-card {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode #services .service-card:hover,
body.dark-mode .service-card:hover {
  box-shadow: 0 15px 40px rgba(80, 216, 175, 0.3) !important;
  border-color: #50d8af !important;
  background: #333 !important;
}

body.dark-mode #services .box h4,
body.dark-mode #services .box h4 a,
body.dark-mode .service-title {
  color: #fff !important;
}

body.dark-mode #services .box:hover h4,
body.dark-mode #services .box:hover h4 a,
body.dark-mode .service-card:hover .service-title {
  color: #50d8af !important;
}

body.dark-mode #services .box p,
body.dark-mode .service-description {
  color: #e0e0e0 !important;
}

body.dark-mode .service-description p {
  color: #e0e0e0 !important;
}

body.dark-mode .service-description[data-read-more].truncated::after {
  background: linear-gradient(to bottom, transparent, rgba(42, 42, 42, 0.98)) !important;
  z-index: 1;
}

body.dark-mode .service-description-wrapper .read-more-btn {
  background: #50d8af;
  color: #fff;
}

body.dark-mode .service-description-wrapper .read-more-btn:hover {
  background: #0c2e8a;
  color: #fff;
}

body.dark-mode .service-description a {
  color: #50d8af;
}

body.dark-mode .service-description a:hover {
  color: #a3ebd5;
}

body.dark-mode .service-description strong {
  color: #fff;
}

body.dark-mode .service-icon-wrapper {
  background: #1a1a1a !important;
}

body.dark-mode .service-icon-bg {
  background: linear-gradient(135deg, rgba(80, 216, 175, 0.1) 0%, rgba(163, 235, 213, 0.1) 100%) !important;
}

body.dark-mode .service-icon {
  color: #50d8af !important;
}

body.dark-mode .service-description h1,
body.dark-mode .service-description h2,
body.dark-mode .service-description h3,
body.dark-mode .service-description h4,
body.dark-mode .service-description h5,
body.dark-mode .service-description h6 {
  color: #fff !important;
}

/*--------------------------------------------------------------
# Events Section Dark Mode
--------------------------------------------------------------*/
/* This is already defined at the top, but keeping for organization */

body.dark-mode #events .event-card,
body.dark-mode .event-card {
  background: #2a2a2a !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode #events .event-card:hover,
body.dark-mode .event-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
  background: #333 !important;
}

body.dark-mode #events .event-content,
body.dark-mode .event-content {
  background: #2a2a2a !important;
}

body.dark-mode .event-title {
  color: #fff !important;
}

body.dark-mode .event-description {
  color: #ccc !important;
}

body.dark-mode .event-description[data-read-more].truncated::after {
  background: linear-gradient(to bottom, transparent, rgba(42, 42, 42, 0.95));
}

body.dark-mode .event-description-wrapper .read-more-btn {
  background: #50d8af;
  color: #fff;
}

body.dark-mode .event-description-wrapper .read-more-btn:hover {
  background: #0c2e8a;
  color: #fff;
}

body.dark-mode .event-additional-info {
  color: #aaa;
  border-top-color: #3a3a3a;
}

body.dark-mode .event-details {
  border-top-color: #3a3a3a;
}

body.dark-mode .event-detail-item {
  color: #ccc;
}

body.dark-mode .event-detail-item i {
  color: #50d8af;
}

body.dark-mode .event-actions {
  border-top-color: #3a3a3a;
}

body.dark-mode .event-btn-email {
  background: linear-gradient(135deg, #50d8af 0%, #a3ebd5 100%);
  color: #fff;
}

body.dark-mode .event-btn-email:hover {
  color: #fff;
}

body.dark-mode .event-btn-phone {
  background: #2a2a2a;
  color: #50d8af;
  border-color: #50d8af;
}

body.dark-mode .event-btn-phone:hover {
  background: #50d8af;
  color: #fff;
}

body.dark-mode .event-empty-state {
  background: #2a2a2a;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .event-empty-state h3 {
  color: #fff;
}

body.dark-mode .event-empty-state p {
  color: #ccc;
}

body.dark-mode .event-image {
  background: #1a1a1a !important;
}

body.dark-mode .event-image-placeholder {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  color: #50d8af !important;
}

body.dark-mode .event-date-badge {
  background: rgba(42, 42, 42, 0.95) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .event-day {
  color: #50d8af !important;
}

body.dark-mode .event-month {
  color: #aaa !important;
}

/*--------------------------------------------------------------
# Mission Vision Values Section Dark Mode
--------------------------------------------------------------*/
/* This is already defined at the top, but keeping for organization */

body.dark-mode #mission-vision-values .mvv-card,
body.dark-mode .mvv-card {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode #mission-vision-values .mvv-card:hover,
body.dark-mode .mvv-card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
  background: #333 !important;
}

body.dark-mode .mvv-mission:hover {
  border-color: #50d8af;
}

body.dark-mode .mvv-vision:hover {
  border-color: #0c2e8a;
}

body.dark-mode .mvv-values:hover {
  border-color: #ff6b6b;
}

body.dark-mode .mvv-title {
  color: #fff !important;
}

body.dark-mode .mvv-mission:hover .mvv-title {
  color: #50d8af !important;
}

body.dark-mode .mvv-vision:hover .mvv-title {
  color: #0c2e8a !important;
}

body.dark-mode .mvv-values:hover .mvv-title {
  color: #ff6b6b !important;
}

body.dark-mode .mvv-icon-wrapper {
  background: #1a1a1a !important;
}

body.dark-mode .mvv-icon-bg {
  background: linear-gradient(135deg, rgba(80, 216, 175, 0.1) 0%, rgba(163, 235, 213, 0.1) 100%) !important;
}

body.dark-mode .mvv-icon {
  color: #50d8af !important;
}

body.dark-mode .mvv-mission .mvv-icon {
  color: #50d8af !important;
}

body.dark-mode .mvv-vision .mvv-icon {
  color: #0c2e8a !important;
}

body.dark-mode .mvv-values .mvv-icon {
  color: #ff6b6b !important;
}

body.dark-mode .mvv-description {
  color: #ccc !important;
}

/*--------------------------------------------------------------
# Portfolio Section Dark Mode
--------------------------------------------------------------*/
body.dark-mode #portfolio {
  background: #1a1a1a !important;
}

body.dark-mode .portfolio-item {
  background: #2a2a2a !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .portfolio-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .portfolio-image {
  background: #1a1a1a;
}

body.dark-mode .portfolio-overlay {
  background: linear-gradient(135deg, rgba(12, 46, 138, 0.95) 0%, rgba(80, 216, 175, 0.95) 100%) !important;
}

body.dark-mode .portfolio-content {
  color: #fff;
}

body.dark-mode .portfolio-content h3 {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .portfolio-content p {
  color: rgba(255, 255, 255, 0.9);
}

body.dark-mode .portfolio-icon {
  color: #fff;
}

/*--------------------------------------------------------------
# Clients Section Dark Mode
--------------------------------------------------------------*/
/* This is already defined at the top, but keeping for organization */

body.dark-mode #clients img {
  filter: grayscale(100%) brightness(0.6) !important;
}

body.dark-mode #clients img:hover {
  filter: grayscale(0%) brightness(1) !important;
}

/*--------------------------------------------------------------
# About Section Dark Mode
--------------------------------------------------------------*/
body.dark-mode #about {
  background: #1a1a1a;
}

body.dark-mode #about .content h2 {
  color: #fff;
}

body.dark-mode #about .content h3 {
  color: #ccc;
}

body.dark-mode #about .content p {
  color: #ccc;
}

body.dark-mode #about .about-features .feature-icon {
  color: #50d8af;
}

body.dark-mode #about .about-features .feature-item h4 {
  color: #ffffff;
}

body.dark-mode #about .about-features .feature-item p {
  color: #cccccc;
}

body.dark-mode #about .content i {
  color: #50d8af;
}

/*--------------------------------------------------------------
# Intro Section Dark Mode
--------------------------------------------------------------*/
body.dark-mode #intro .intro-content h2 {
  color: #fff;
}

body.dark-mode #intro .intro-content h2 span {
  color: #50d8af;
}

/*--------------------------------------------------------------
# Call to Action Section Dark Mode
--------------------------------------------------------------*/
body.dark-mode #call-to-action {
  background: #0a1628;
}

body.dark-mode #call-to-action .cta-title {
  color: #fff;
}

body.dark-mode #call-to-action .cta-text {
  color: #ccc;
}

body.dark-mode #call-to-action .cta-btn {
  border-color: #fff;
  color: #fff;
}

body.dark-mode #call-to-action .cta-btn:hover {
  background: #50d8af;
  border-color: #50d8af;
  color: #fff;
}

/*--------------------------------------------------------------
# Contact Section Dark Mode
--------------------------------------------------------------*/
body.dark-mode #contact {
  background: #1a1a1a;
}

body.dark-mode #contact .contact-info i {
  color: #50d8af;
}

body.dark-mode #contact .contact-info h3 {
  color: #fff;
}

body.dark-mode #contact .contact-info address,
body.dark-mode #contact .contact-info p {
  color: #ccc;
}

body.dark-mode #contact .contact-info a {
  color: #50d8af;
}

body.dark-mode #contact .contact-info a:hover {
  color: #a3ebd5;
}

body.dark-mode #contact #google-map {
  border: 1px solid #3a3a3a;
}

/*--------------------------------------------------------------
# Navigation Menu Dark Mode
--------------------------------------------------------------*/
body.dark-mode .logo-menu-item .logo-link h1 {
  color: #fff;
}

body.dark-mode .logo-menu-item .logo-link h1 span {
  color: #50d8af;
}

/* Mobile Header Dark Mode */
body.dark-mode #header {
  background: rgba(42, 42, 42, 0.95) !important;
}

body.dark-mode #header .logo-menu-item .logo-link h1 {
  color: #fff;
}

body.dark-mode #header .logo-menu-item .logo-link h1 span {
  color: #50d8af;
}

body.dark-mode #mobile-nav-toggle i {
  color: #ccc;
}

body.dark-mode #mobile-nav-toggle:hover i {
  color: #50d8af;
}

body.dark-mode.mobile-nav-active #mobile-nav-toggle i {
  color: #50d8af;
}

/* Mobile Nav Dark Mode */
body.dark-mode #mobile-nav {
  background: rgba(42, 42, 42, 0.98);
}

body.dark-mode #mobile-nav ul li a {
  color: #fff;
}

body.dark-mode #mobile-nav ul .menu-has-children i {
  color: #fff;
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-switcher-btn-public {
  color: #fff;
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-menu-public {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-option-public {
  color: #fff;
}

body.dark-mode #mobile-nav .dark-mode-toggle-menu-item .dark-mode-toggle {
  color: #fff;
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-switcher-btn-public {
  color: #fff;
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-switcher-btn-public:hover {
  color: #50d8af;
  background: rgba(80, 216, 175, 0.1);
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-menu-public {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-option-public {
  color: #fff;
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-option-public:hover {
  color: #50d8af;
  background: rgba(80, 216, 175, 0.1);
}

body.dark-mode #mobile-nav .language-switcher-menu-item .language-option-public.active {
  color: #50d8af;
  background: rgba(80, 216, 175, 0.15);
}

body.dark-mode #mobile-body-overly {
  background: rgba(42, 42, 42, 0.95);
}

body.dark-mode .language-switcher-menu-item .language-switcher-btn-public {
  color: #ccc;
}

body.dark-mode .language-switcher-menu-item:hover .language-switcher-btn-public,
body.dark-mode .language-switcher-menu-item.menu-active .language-switcher-btn-public {
  color: #50d8af;
}

body.dark-mode .language-switcher-menu-item .language-menu-public {
  background: #2a2a2a;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
}

body.dark-mode .language-switcher-menu-item .language-option-public {
  color: #ccc;
}

body.dark-mode .language-switcher-menu-item .language-option-public:hover {
  color: #50d8af;
  background-color: #3a3a3a;
}

body.dark-mode .language-switcher-menu-item .language-option-public.active {
  color: #50d8af;
  background-color: #3a3a3a;
}

/*--------------------------------------------------------------
# Owl Carousel Dark Mode (Global)
--------------------------------------------------------------*/
body.dark-mode .owl-nav button {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #3a3a3a;
}

body.dark-mode .owl-nav button:hover {
  background: #50d8af;
  color: #fff;
  border-color: #50d8af;
}

body.dark-mode .owl-dot {
  background-color: #3a3a3a;
}

body.dark-mode .owl-dot:hover {
  background-color: #50d8af;
}

body.dark-mode .owl-dot.active {
  background-color: #50d8af;
}


@media (max-width: 910px) {
  body.dark-mode #header #nav-menu-container .nav-menu > .logo-menu-item .logo-link h1 {
      /* color: #0c2e8a !important; */
      color: #fff !important;
  }
}

/*--------------------------------------------------------------
# Links Section Dark Mode
--------------------------------------------------------------*/
body.dark-mode #links {
  background: #1a1a1a !important;
}

body.dark-mode #exchange-rates {
  padding: 60px 0;
  background: #1a1a1a !important;
}

body.dark-mode #exchange-rates .table {
  background: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode #exchange-rates .table thead {
  background: linear-gradient(135deg, #0c2e8a 0%, #1a4db8 100%);
  color: #fff;
}

body.dark-mode #exchange-rates .table thead th {
  border-bottom: 3px solid #50d8af;
  color: #fff;
}

body.dark-mode #exchange-rates .table tbody tr {
  background: #2a2a2a;
  border-bottom: 1px solid #3a3a3a;
}

body.dark-mode #exchange-rates .table tbody tr:nth-child(even) {
  background: #252525;
}

body.dark-mode #exchange-rates .table tbody tr:hover {
  background: linear-gradient(90deg, #3a3a3a 0%, #404040 100%);
  cursor: pointer;
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(80, 216, 175, 0.2);
}

body.dark-mode #exchange-rates .input-group-addon {
  background: linear-gradient(135deg, #0c2e8a 0%, #1a4db8 100%);
  color: #fff;
  border-color: #0c2e8a;
}

body.dark-mode #exchange-rates .input-group .form-control {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #3a3a3a;
}

body.dark-mode #exchange-rates .input-group .form-control:focus {
  background: #2a2a2a;
  color: #e0e0e0;
  border-color: #0c2e8a;
  box-shadow: 0 0 0 0.2rem rgba(12, 46, 138, 0.25);
}

body.dark-mode #exchange-rates .input-group .form-control[readonly] {
  background: #1f1f1f;
  color: #ccc;
  cursor: not-allowed;
}

/* Override Bootstrap's .bg-white in dark mode */
body.dark-mode .bg-white {
  background-color: #2a2a2a !important;
}

body.dark-mode #exchange-rates .bg-white {
  background-color: #2a2a2a !important;
}

/* Form Controls Dark Mode */
body.dark-mode .form-control {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #3a3a3a !important;
}

body.dark-mode .form-control:focus {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #0c2e8a !important;
  box-shadow: 0 0 0 0.2rem rgba(12, 46, 138, 0.25) !important;
}

body.dark-mode .form-control::placeholder {
  color: #999 !important;
}

body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly] {
  background-color: #1f1f1f !important;
  color: #999 !important;
  cursor: not-allowed;
}

body.dark-mode select.form-control {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #3a3a3a !important;
}

body.dark-mode select.form-control:focus {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #0c2e8a !important;
}

body.dark-mode input[type="date"].form-control,
body.dark-mode input[type="number"].form-control,
body.dark-mode input[type="text"].form-control {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
  border-color: #3a3a3a !important;
}

/* Ocultar spinners de inputs number en modo oscuro */
body.dark-mode #exchange-rates input[type="number"]::-webkit-inner-spin-button,
body.dark-mode #exchange-rates input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.dark-mode #exchange-rates input[type="number"] {
  -moz-appearance: textfield;
}

/* Alertas Dark Mode */
body.dark-mode #exchange-rates .alert-danger {
  background-color: #4a1f1f !important;
  border-color: #6b2a2a !important;
  color: #ff6b6b !important;
}

body.dark-mode #exchange-rates .form-control.is-invalid {
  border-color: #dc3545 !important;
}

body.dark-mode #exchange-rates .invalid-feedback {
  color: #ff6b6b !important;
}

/* Calculadora mejorada Dark Mode */
body.dark-mode #exchange-rates .exchange-rate-badge {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  border-color: #4a4a4a;
}

body.dark-mode #exchange-rates #result-output {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  color: #e0e0e0;
}

body.dark-mode #exchange-rates #from-currency {
  background: linear-gradient(135deg, #0c2e8a 0%, #1a4db8 100%);
  color: #fff;
}

body.dark-mode #exchange-rates #from-currency option {
  background: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode #exchange-rates .quick-amount {
  border-color: #3a3a3a;
  color: #e0e0e0;
}

body.dark-mode #exchange-rates .quick-amount:hover {
  background: #0c2e8a;
  border-color: #0c2e8a;
  color: #fff;
}

/* Calculadora UDI Dark Mode */
body.dark-mode #exchange-rates #udi-from-currency {
  background: linear-gradient(135deg, #50d8af 0%, #3bc99a 100%);
  color: #fff;
}

body.dark-mode #exchange-rates #udi-from-currency option {
  background: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode #exchange-rates #udi-result-output {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  color: #e0e0e0;
}

body.dark-mode #exchange-rates .udi-quick-amount {
  border-color: #3a3a3a;
  color: #e0e0e0;
}

body.dark-mode #exchange-rates .udi-quick-amount:hover {
  background: #50d8af;
  border-color: #50d8af;
  color: #fff;
}

body.dark-mode #exchange-rates .table tbody td {
  color: #e0e0e0;
  border-color: #3a3a3a;
  font-weight: 500;
}

body.dark-mode #exchange-rates .badge-primary {
  background: linear-gradient(135deg, #0c2e8a 0%, #1a4db8 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode #exchange-rates .badge-success {
  background: linear-gradient(135deg, #50d8af 0%, #3bc99a 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode #exchange-rates .badge-info {
  background: linear-gradient(135deg, #17a2b8 0%, #2bb8d0 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .link-card {
  background: #2a2a2a !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
}

body.dark-mode .link-card:hover {
  box-shadow: 0 5px 20px rgba(0,0,0,0.5) !important;
}

body.dark-mode .link-image-placeholder {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
}

body.dark-mode .link-image-placeholder i {
  color: rgba(80, 216, 175, 0.5) !important;
}

body.dark-mode .link-overlay {
  background: rgba(0,0,0,0.8) !important;
}

body.dark-mode .link-title {
  color: #fff !important;
}

body.dark-mode .link-description {
  color: rgba(255,255,255,0.9) !important;
}

body.dark-mode .link-btn {
  background: #50d8af !important;
  color: #fff !important;
}

body.dark-mode .link-btn:hover {
  background: #0c2e8a !important;
  box-shadow: 0 3px 10px rgba(80, 216, 175, 0.5) !important;
}