/* 
$bp-largest: 75em; // 1200px
$bp-large: 62.5em; // 1000px
$bp-medium: 50em; // 800px
$bp-small: 37.5em; // 600px
$bp-smallest: 31.25em; // 500px 
*/
@import "./header.css";
@import "./hero.css";
@import "./about.css";
@import "./services.css";
@import "./testimonials.css";
@import "./editor.css";
@import "./footer.css";


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-thumb {
  background-color: var(--text-color);
}

::-webkit-scrollbar-track {
  background-color: var(--background-color);
}

:root {
  /* Your existing colors */
  --main-color-1: #344e41; /* Deep Green (text / accents) */
  --main-color-2: #3a5a40; /* Forest Green */
  --main-color-3: #588157; /* Moss Green */
  --main-color-4: #a3b18a; /* Sage */
  --main-color-5: #dad7cd; /* Light Beige */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Enhanced light mode colors */
  --light-primary: #f8f9fa; /* Soft off-white */
  --light-secondary: #e9ecef; /* Light gray */
  --light-accent: #f1f3f0; /* Very light sage */
  --light-surface: #ffffff; /* Pure white for cards/surfaces */
  --light-border: #dee2e6; /* Subtle border color */

  /* Enhanced dark mode colors */
  --dark-primary: #1a1f1c; /* Very dark green-gray */
  --dark-secondary: #242b26; /* Dark forest */
  --dark-accent: #2d3a2f; /* Medium dark green */
  --dark-surface: #1e251f; /* Dark surface for cards */
  --dark-border: #495057; /* Dark border color */

  /* Light mode (default) */
  --background-color: var(--light-primary);
  --text-color: var(--main-color-1);
  --accent-color: var(--main-color-2);
  --surface-color: var(--light-surface);
  --secondary-bg: var(--light-secondary);
  --border-color: var(--light-border);
  --muted-text: #6c757d;
}

[data-theme="dark"] {
  --background-color: var(--dark-primary);
  --text-color: var(--main-color-5);
  --accent-color: var(--main-color-4);
  --surface-color: var(--dark-surface);
  --secondary-bg: var(--dark-secondary);
  --border-color: var(--dark-border);
  --muted-text: #adb5bd;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  @media only screen and (max-width: 50em) {
    font-size: 55%;
  }
}

body {
  font-family: "Poppins", sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: all 0.4s ease;
  min-height: 100vh;
  overflow-x: hidden;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  display: none;
  z-index: 999;
}

.overlay.active {
  display: block;
}

#getToTop {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  font-size: 4rem;
  background-color: var(--background-color);
  color: var(--text-color);
  border: 2px solid var(--border-color);
  z-index: 5;
  transform: translateY(10rem);
  opacity: 0;
  transition: 0.4s all ease;
  cursor: pointer;
}

#getToTop:hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

#getToTop.active {
  transform: translateY(0);
  opacity: 1;
}

.error_popup {
  width: 80%;
  max-width: 900px;
  position: fixed;
  bottom: -15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  background-color: var(--text-color);
  color: var(--background-color);
  padding: 2rem;
  border-radius: 2rem;
  transition: 0.5s all ease;
}

.error_popup.active {
  bottom: 5%;
}

.error_message {
  text-align: center;
  font-size: 2rem;
}