:root {
  --white: #ffffff;
  --black: #000000;
  --bg: #f8f9fa;
  --fg: #34495e;
  --primary: #6a329f;
  --secondary: #25d366;
  --card-bg: #fff;
  --border: #e5e7eb;
  --bot-msg-bg: #e1ffc7;
  --user-msg-bg: #f1f0f0;
  --link: #0d6efd;
  --red: #FF0000;
  --red-dark: #F15151;
  --red-burnt: #E97451;
  --web-bg: #ffffff;
  --blue: #1f567c;
  --blue-text: #0d6efd;
  --gray: #222222;
  --gray-df: #DFE6F2;
  --gray-666: #666666;
  --gray-888: #888888;
  --text-gray: #6c757d;
  --gray-medium: #6c757d;
  --green: #25d366;
  --green-dark: #228B22;
  --light-green: #65a765;
  --green-light: #e8f5e9;
  --orange: #ff6b35;
  --orange-light: #fff4f0;
  --chocolate: #713600;
  --chocolate-light: #D69456;
  --coffee: #6F4E37;
  --yellow-vintage: #f0e27b;
  --yellow-dark: #e09f3e;
  --yellow-beer: #E6BF83;
}

body, html {
  overflow-x: hidden;
}

.ka12-modal-menu-icon {
  display: inline-block;
  cursor: pointer;
}

.ka12-modal-menu-icon span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: var(--black);
  transition: 0.3s;
}

.ka12-theme-toggle {
  display: flex;
  align-items: center;
  color: var(--black);
  border: none;
  font-size: 1rem;
  gap: 0.8rem;
}

.ka12-toggleMenu-fixed{
  display: none;
}

/* Page Start */
.main-page-start{
  margin-top: 4.375rem;
}

/* Header */
.ka12-home-header__logo-text {
  font-size: 1rem;
  font-weight: 600;
}

.ka12-home-header__nav a {
  color: var(--black);
  text-decoration: none;
  padding: 0.5rem 1.4rem;
  transition: color 0.3s ease;
  font-weight: 400;
}

.ka12-home-header__nav a:hover {
  color: var(--secondary);
}

.ka12-home-header__nav a.active {
  color: var(--secondary);
  font-weight: 600; 
}

/* Font Select */
#body-font-size{
  text-align: right;
}
#body-font-size select{
  font-size: 0.775rem;
}

/* Footer */
.ka12-home-footer {
  background: var(--white);
  padding: 1rem 0;
  text-align: center;
  color: var(--gray-666);
  border-top: 1px solid var(--border);
}

.ka12-home-footer-wrapper{
  margin-bottom: 0;
  font-size: 0.8rem;
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #body-font-size select {
    font-size: 1rem;
  }
}
/* Responsive Design */
@media (max-width: 767px) {
  .main-page-start{
    margin-top: 3.75rem;
  }

  .ka12-modal-menu-icon span {
    height: 2px;
  }
  
  .ka12-theme-toggle { 
    font-size: 0.8rem;
    gap: 0.6rem;
  }
  
  .ka12-home-header__logo-text {
    font-size: 1rem;
    font-weight: 500;
  }

  .ka12-home-header__nav {
    display: none;
  }

  .ka12-toggleMenu-fixed {
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: 4.4rem;
    right: 0.8rem;
    background-color: var(--yellow-vintage);
    padding: 6px;
    border-radius: 10px;
  }
  .ka12-toggleMenu-fixed svg{
    width: 1.5rem;
    height: 1.5rem;
  }
  #body-font-size select {
    font-size: 0.775rem;
  }
}

.text-decoration-none {
  text-decoration: none !important;
}

/* privacy */
.ka12-privacy{
  background-color: var(--white);
  padding: 2rem 0;
}

.ka12-privacy h1{
  color: var(--black);
  font-size: 1.6rem;
}

.ka12-privacy p{
  color: var(--black);
  font-size: 0.875rem;
}

.ka12-privacy b{
  font-weight: 600;
}


/* Dark theme */
body.dark-mode {
  --white: #000000;
  --black: #ffffff;
  --bg: #181a20;
  --fg: #e5e7eb;
  --primary: #25d366;
  --secondary: #25d366;
  --card-bg: #23272f;
  --border: #333;
  --bot-msg-bg: #1e2a1e;
  --user-msg-bg: #23272f;
  --link: #0d6efd;
  --web-bg: #000000;
  --gray-666: #ffffff;
  --blue-text: #25d366;
  --orange-light: #000000;
  --gray-medium: #ffffff;
  --text-gray: #ffffff;
  --green-light: #222222;
  --gray: #ffffff;
}