/* ======= Light Theme (Default) ======= */
@font-face {
  font-family: 'Mokoto';
  src: url('fonts/mokoto.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg-color: #faf4f4;
  --text-color: #212529;
  --card-bg: #ffffff;
  --footer-bg: #e3e3e3;
  --card-text-color: #212529;
  --btn-bg: #ec3c41;
  --btn-text: #ffffff;
  --pri-but: #faf4f4;
  --navbar-bg-color: #ffffff;
}

html {
  height: 100%;
}

/* ======= Base Styles ======= */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

/* ======= Logo ======= */
.logo-img {
  height: 60px;
  object-fit: contain;
}

.logo-img2 {
    max-width: 120px;
    height: auto;
  }

/* ======= Layout ======= */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.5s;
}

#main-content.show{

opacity: 1;
}

/* ======= Card Styles ======= */
.card {
  position: relative; /* Needed for ::after */
  background-color: var(--card-bg);
  border: none;
  box-shadow: 0 0 12px 2px rgba(236, 60, 65, 0.3);
  transition: transform 0.2s ease, background-color 0.3s, color 0.3s, box-shadow 0.3s ease;
  opacity: 0;
  animation: slideInUp 0.9s ease-out forwards;
  overflow: visible;
}

/* Glow pulse on hover using ::after pseudo-element */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 12px 2px rgba(236, 60, 65, 0);
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: -1;
}

.card:hover {
  transform: translateY(-5px);
  /* Keep original animation state */
  animation-play-state: paused;
  /* No new animation here to avoid flicker */
}

.card:hover::after {
  animation: pulseGlow 1.8s infinite ease-in-out;
  box-shadow: 0 0 12px 2px rgba(236, 60, 65, 0.3);
}

/* ======= Card Body ======= */
.card-body {
  color: var(--card-text-color);
}

.card-text
{
  padding-bottom: 1rem;
}

.card-body i {
  color: #ec3c41 !important;
  font-size: 3.5rem;
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}

/* ======= Buttons ======= */
.btn-explore {
  background-color: var(--btn-bg);
  color: var(--btn-text);
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 500;
  text-decoration: none;
  border: none;
  transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-explore:hover {
  background-color: #fc565b;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(236, 60, 65, 0.4);
}

.btn-outline-primary {
  color: #ec3c41;
  border-color: #ec3c41;
}

.btn-outline-primary:hover {
  background-color: var(--pri-but);
  color: #ec3c41;
  border-color: #ec3c41;
  transform: scale(1.1);
}

/* ======= Card Icon ======= */
.card-icon {
  font-size: 3rem; /* for font-based icons like Font Awesome */
  width: 60px; /* for image-based icons */
  height: 60px;
  margin-bottom: 1rem;
  animation: floatIcon 4s ease-in-out infinite;
}

/* ======= Toggle Switch Text ======= */
.form-check-label {
  cursor: pointer;
  user-select: none;
}

/* ======= Dark Mode Variables & Styles ======= */
.dark-mode {
  --bg-color: #121212;           /* softer dark background */
  --text-color: #e0e0e0;         /* soft off-white text */
  --card-bg: #1e1e1e;            /* dark card background */
  --card-text-color: #e0e0e0;    /* card text soft white */
  --btn-bg: #ec3c41;             /* keep button red */
  --btn-text: #ffffff;
  --pri-but: rgba(236, 60, 65, 0.05);
  --navbar-bg-color:#212529;
}

/* Apply dark mode colors */
body.dark-mode {
  background-color: var(--bg-color);
  color: var(--text-color);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: background-color 0.3s, color 0.3s;
}

/* Cards in dark mode */
body.dark-mode .card {
  background-color: var(--card-bg);
  color: var(--card-text-color);
  box-shadow: 0 0 12px 2px rgba(236, 60, 65, 0.4);
}

/* Footer in dark mode */
body.dark-mode .footer {
  background-color: #0f0f0f; /* darker footer */
  color: #f8f9fa;            /* light footer text */
  text-shadow: none;
}


/* Buttons */
body.dark-mode .btn-explore {
  background-color: var(--btn-bg);
  color: var(--btn-text);
}
body.dark-mode .btn-explore:hover {
  background-color: #fc565b;
  box-shadow: 0 0 12px rgba(236, 60, 65, 0.6);
}

/* Links */
body.dark-mode a {
  color: none; 
  text-decoration: none;
  transition: color 0.3s ease;
}
body.dark-mode a:hover {
  color: #ec3c41; 
}

/* Form toggle (dark mode switch) */
.form-check-input:checked {
  background-color: #ec3c41;
  border-color: #ec3c41;
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(236, 60, 65, 0.25);
}

.logo-text {
  font-family: 'Mokoto', sans-serif;
  font-size: 1.8rem;
  font-weight: normal;
  color: var(--text-color);
  transition: color 0.3s;
}

h1 {
  font-family: 'Mokoto', sans-serif;
}

.main-heading {
  font-family: 'Mokoto', sans-serif;
}

.footer {
  background-color: var(--navbar-bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  font-weight: bold;
}

.footer i {
  color: var(--text-color);
}

.footer i:hover {
  color: #ec3c41;
}

.footer a {
  color: var(--text-color);
}

/* ======= Animations ======= */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 12px 2px rgba(236, 60, 65, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(236, 60, 65, 0.5);
  }
}

@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Staggered card animation delays */
.card:nth-child(1) {
  animation-delay: 0.2s;
}
.card:nth-child(2) {
  animation-delay: 0.4s;
}
.card:nth-child(3) {
  animation-delay: 0.6s;
}
.card:nth-child(4) {
  animation-delay: 0.8s;
}

body.dark-mode .dropdown-menu {
  background-color: #222;
  border-color: #444;
}

body.dark-mode .dropdown-item {
  color: #eee;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: #333;
  color: #fff;
}

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

body.dark-mode .nav-link:hover {
  color: #ffffff !important;
}

/* === Fix hamburger in dark mode === */
body.dark-mode .navbar-toggler {
  border-color: #ec3c41; /* Red border */
}

body.dark-mode .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28 236, 60, 65, 1 %29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}



.top-bar {
  background-color: #ec3c41;
  font-size: 0.95rem;
  font-weight: 500;
  z-index: 1031;
}

@media (max-width: 576px) {
  .top-bar {
    flex-direction: column;
    text-align: center;
  }

  .top-bar > div {
    width: 100%;
    margin: 0.2rem 0;
  }
}

.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #ec3c41;
  color: white;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1040;
  animation: bobUpDown 2s ease-in-out infinite;
}

.scroll-top i {
  font-size: 1.5rem;
}

.scroll-top.show {
  opacity: 1;
  visibility: visible;
}

@keyframes bobUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

#scrollTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1050;
  background-color: #ec3c41;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 18px; /* increased padding for larger size */
  font-size: 1.5rem; /* increased font size for bolder appearance */
  cursor: pointer;
  display: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  animation: bounceArrow 2s infinite;
  transition: transform 0.2s ease;
}

#scrollTopBtn.show {
  display: inline-block;
}

#scrollTopBtn:hover {
  transform: scale(1.1);
}

/* === Link Hover Color === */
a:hover,
.nav-link:hover,
.dropdown-item:hover {
  color: #ec3c41 !important;
}

/* === Dropdown Menu on Hover === */
.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

/* === Smooth Dropdown Appearance === */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* === Dropdown Hover Styles === */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(236, 60, 65, 0.1);
  color: #ec3c41 !important;
}

/* === Dark Mode Dropdown Hover === */
body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
  background-color: rgba(236, 60, 65, 0.2);
  color: #ec3c41 !important;
}

/* === Force navbar links to use red on hover === */
.navbar .nav-link {
  transition: color 0.3s ease;
}

.navbar .nav-link:hover,
.navbar .nav-item:hover > .nav-link {
  color: #ec3c41 !important;
}

/* Prevent contact bar links from changing color on hover */
.top-bar a {
  color: white !important;          /* Keep white color */
  text-decoration: none !important; /* Keep no underline */
}

.top-bar a:hover,
.top-bar a:focus {
  color: white !important;          /* Still white on hover/focus */
  text-decoration: none !important; /* No underline on hover/focus */
  cursor: pointer;                  /* Keep pointer cursor */
}


/* Full screen overlay with white background */
#loader {
  position: fixed;       /* Stay fixed over viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: white; /* white background while loading */
  display: flex;         /* flexbox centering */
  justify-content: center;
  align-items: center;
  z-index: 9999;         /* on top of everything */
  opacity: 1;
  transition: opacity 0.5s ease;
}

#loader.fade-out{
  opacity: 0;
  pointer-events: none;
}

/* Loader size same as your PNG */
.loader {
  width: 120px;         /* original size */
  height: 120px;
  position: relative;   /* for inner absolute elements */
}

/* Inner elements inside loader, fill loader container */
.loader .outer
{
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 95%;
}

.loader .center {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 90%;
}

.loader .outer {
  animation: spin 4s linear infinite;
  transform-origin: center;
}

.dark-mode #loader {
  background-color: black;
}


@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hidden {
  display: none;
}

/* Light mode navbar */
body:not(.dark-mode) .mode-aware-navbar {
  background-color: #ffffff;
  color: #000;
  border-bottom: 1px solid #dee2e6;
}

/* Dark mode navbar */
body.dark-mode .mode-aware-navbar {
  background-color: #212529;
  color: #f8f9fa;
  border-bottom: 1px solid #333;
}

body.dark-mode .mode-aware-navbar .nav-link {
  color: #f8f9fa;
}

body:not(.dark-mode) .mode-aware-navbar .nav-link {
  color: #000;
}

.process-wrapper {
  position: relative;
  padding-top: 2rem;
}

.process-heading {
  font-family: 'Mokoto', sans-serif;
  color: var(--text-color); /* Optional: ensure visibility in dark mode */
  font-size: 3rem;
}

.process-wrapper h2 {
  font-family: 'Mokoto', sans-serif;
}

.process-step {
  position: relative;
  z-index: 2;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: var(--text-color);
}

.process-step:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 20px rgba(236, 60, 65, 0.3); /* red glow */
}

.step-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 0.5rem;
  background-color: var(--btn-bg); /* red in both modes */
  color: var(--btn-text);
  font-size: 1.8rem;
  line-height: 70px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(236, 60, 65, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative; /* Added for step number positioning */
}

.step-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(236, 60, 65, 0.5);
}

/* Step number styling */
.step-number {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: var(--bs-light);
  color: #ec3c41;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  line-height: 22px;
  font-weight: bold;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  z-index: 3;
}

/* Dark mode support for step number */
body.dark-mode .step-number {
  background-color: var(--bs-dark);
  color: #ff7c7f;
}

.timeline-line {
  position: absolute;
  top: 75px;
  left: 7%;
  width: 75%;
  height: 3px;
  background: linear-gradient(to right, #ec3c41, #ff7c7f); /* red gradient */
  z-index: 1;
  animation: draw-line 2.5s ease forwards;
  border-radius: 2px;
}

@keyframes draw-line {
  from { width: 0; }
  to { width: 85%; }
}

body.dark-mode .text-muted {
  color: #cccccc !important; /* or #bbbbbb for slightly lighter text */
}

.custom-outline-btn {
  border: 2px solid #ec3c41;
  color: #ec3c41 !important;
  font-size: 1.1rem;
  padding: 0.6rem 1.2rem;
  background: transparent;
  text-decoration: none !important;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Optional hover state */
.custom-outline-btn:hover {
  background-color: rgba(236, 60, 65, 0.05);
  color: #ec3c41 !important;
  box-shadow: 0 0 8px rgba(236, 60, 65, 0.3);
}

/* Optional: dark mode fix if you're using a dark theme class on <body> */
body.dark-mode .custom-outline-btn {
  color: #ec3c41 !important;
  border-color: #ec3c41;
}

/* Assuming your navbar uses these CSS variables */
.logo-section {
  background-color: var(--navbar-bg-color);
  color: var(--navbar-text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Heading matches text color */
.logo-section h2 {
  color: var(--navbar-text-color);
}

/* Logo images sizing */
.logo-section img {
  max-height: 80px;
  object-fit: contain;
  margin: 0 auto;
}

/* Brands Section */
.brands-section {
  background-color: #faf4f4;
  color: #000; /* Default text color in light mode */
}

.dark-mode .brands-section {
  background-color: #1c1c1c; /* Darker background for dark mode */
  color: #fff; /* Text stays white in dark mode */
}

.container-90 {
  width: 90%;
  max-width: 90%;
  margin-top: 1.85rem;
  margin-left: auto;
  margin-right: auto;
}

.container-901 {
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin-top: 1.85rem;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--bg-color);
}

/* Light mode FAQ styles */
.accordion-item {
  border: 1px solid #ccc; /* Light border */
}

.accordion-button {
  box-shadow: none;
  outline: none;
}

.accordion-button:focus {
  border-color: #ff7c7f; /* Custom highlight */
  box-shadow: none;
  outline: none;
}

/* Arrow icon – collapsed (default state in light mode) */
.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  filter: none;
}

/* Arrow icon – expanded (active state in light mode) */
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff7c7f' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  filter: none;
}

/* Dark mode overrides */
body.dark-mode .accordion-item {
  background-color: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #444;
}

body.dark-mode .accordion-button {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .accordion-button:not(.collapsed) {
  background-color: #2a2a2a;
  color: #ec3c41;
}

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

body.dark-mode .accordion-button:focus {
  border-color: #ff7c7f;
}

/* Arrow icon in dark mode (white in collapsed state) */
body.dark-mode .accordion-button.collapsed::after {
  filter: brightness(0) invert(1); /* White arrow */
}

/* Arrow icon in dark mode when expanded (already customized) */
body.dark-mode .accordion-button:not(.collapsed)::after {
  filter: none;
}

/* Force background color in light mode when expanded */
.accordion-button:not(.collapsed) {
  background-color: #f8f9fa; /* Neutral light background */
  color: #ec3c41; /* Text color */
  box-shadow: none;
}

/* Dark mode styles for form inputs */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #1e1e1e;
  color: #f1f1f1;
  border-color: #444;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #aaa;
}

/* Optional: adjust label color */
body.dark-mode .form-label {
  color: #ddd;
}

/* Optional: adjust card background */
body.dark-mode .card {
  background-color: #2b2b2b;
  color: #f1f1f1;
}

.pg-img {
  width: 100%;                
  height: auto;              
  max-height: 400px;          
  border-radius: 6px;         
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
  object-fit: cover;
}

.container-902 {
  padding-top: 2rem;
  margin: 1.85rem auto 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  background-color: var(--bg-color);
}

.tech-video {
  max-width: 1200px;
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.icon-red {
  color: #ec3c41;
}

section {
  scroll-margin-top: 100px;
}

.nav-link.active  {
  color: #ec3c41 !important;
  font-weight: bold;
}

body.dark-mode .nav-link.active {
  color: #ec3c41 !important;
}