/* Primary Font */
@import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic);
/* Secondary Font */
@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
/* Muted Font */
@import url(https://fonts.googleapis.com/css?family=Nunito:200,300,regular,500,600,700,800,900,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

/** ====== CSS Variables for Light Theme ====== */
:root {
  /* colors*/
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-card: #ffffff;
  --text-primary: #1a202c;
  --text-secondary: #718096;
  --text-muted: #a0aec0;
  --border-color: #e2e8f0;
  --primary-color: #3b82f6;
  --primary-glow: #60a5fa;
  --secondary-color: #8b5cf6;
  --accent-color: #a855f7;
  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --gradient-hero: linear-gradient(135deg, #3b82f6, #a855f7);
  --gradient-section: linear-gradient(180deg, #f8fafc, #ffffff);
  --x-color-1: #fff;
  --x-color-2: #000;
  /*fonts*/
  --primary-font: "Poppins", system-ui;
  --secondary-font: "Raleway", sans-serif;
  --muted-font: "Nunito", sans-serif;
}

/** ====== CSS Variables for Dark Theme ====== */
body.darkTheme {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-card: #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --border-color: #475569;
  --primary-color: #60a5fa;
  --primary-glow: #93c5fd;
  --secondary-color: #a78bfa;
  --accent-color: #c084fc;
  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
  --gradient-hero: linear-gradient(135deg, #60a5fa, #c084fc);
  --gradient-section: linear-gradient(180deg, #334155, #1e293b);
  --x-color-1: #000;
  --x-color-2: #fff;
}

/** ===== Reset All Elements in Pages ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--primary-font);
  transition: all 0.3s ease;
  text-decoration: none;
  scroll-behavior: smooth;
}

/* ==== ScrollBar ==== */
::-webkit-scrollbar {
  width: 10px;
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  width: 100%;
  background: var(--gradient-hero);
}

/* ==== Selection ==== */
::selection{
  background:var(--primary-glow);
  color: #FFF;
}

/* remove scrollX */
body {
  overflow-x: hidden;
}

/* Reset Button*/
button {
  outline: none;
  border: none;
  font-family: var(--secondary-font);
  color: var(--btn-color);
  cursor: pointer;
}

/* reset links */
a {
  font-family: var(--muted-font);
  text-transform: capitalize;
}

/* reset heads */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--secondary-font);
  text-transform: capitalize;
}

/* reset sections */
section {
  padding: 100px 50px;
}

/* Loading animation */
.loading {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0px;
  padding: 0px;
  background: rgb(0, 0, 0, 0.7);
  z-index: 99999;
  display: none;
}

.load {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 99999;
}

.load span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.load span:first-child {
  background: var(--accent-color);
  animation: loading 0.6s ease-in-out 0s infinite alternate;
}

.load span:nth-child(2) {
  background: var(--primary-color);
  animation: loading 0.6s ease-in-out 0.2s infinite alternate;
}

.load span:nth-child(3) {
  background: var(--gradient-hero);
  animation: loading 0.6s ease-in-out 0.4s infinite alternate;
}

.load span:last-child {
  background: var(--text-muted);
  animation: loading 0.6s ease-in-out 0.6s infinite alternate;
}

/* animation */
@keyframes loading {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-15px) scale(1.2);
    opacity: 1;
  }
}


/*Sections Title */
.section-head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-bottom: 5rem;
}

.section-head .main-title {
  font-size: 50px;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.section-head .section-desc {
  color: var(--text-secondary);
  font-size: 20px;
  text-transform: capitalize;
  width: 50%;
}


/* back to top btn */
#TopBtn {
  background: var(--gradient-hero);
  width: 50px;
  height: 50px;
  border-radius: 5px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  border: 1px solid var(--border-color);
  z-index: 9999;
}

#TopBtn.show {
  opacity: 1;
}

#TopBtn:active {
  transform: scale(0.8);
}

#TopBtn i {
  color: #fff;
  font-size: 30px;
}



/* Footer */
footer{
  padding: 25px;
  background: var(--gradient-section);
  text-align: center;
  border-top: 1px solid var(--border-color);
}

footer p{
  text-transform: capitalize;
  color: var(--text-secondary);
}