@import url("variable.css");
@import url("reset.css");

body {
  font-family: "Poppins", sans-serif;

  background: var(--bg);

  color: var(--text);

  line-height: 1.6;

  transition: var(--transition);
}

/* Container */

.container {
  width: min(95%, var(--container));

  margin: auto;
}

/* Section */

section {
  padding: var(--section-padding) 0;
}

/* Heading */

.about-heading .section-title {
  max-width: 850px;
  margin: 0 auto;
}
.section-subtitle {
  color: var(--text-light);

  max-width: 700px;

  margin: auto;
}

/* Button */

.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 14px 30px;

  background: var(--primary);

  color: white;

  border-radius: var(--radius);

  transition: var(--transition);

  font-weight: 600;

  box-shadow: var(--shadow-sm);
}

.btn:hover {
  background: var(--primary-dark);

  transform: translateY(-4px);
}

/* Card */

.card {
  background: var(--bg-light);

  border-radius: var(--radius);

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--border);

  transition: var(--transition);
}

.card:hover {
  transform: translateY(-8px);

  box-shadow: var(--shadow-lg);
}

/* Glass */

.glass {
  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: var(--blur);

  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Grid */

.grid {
  display: grid;

  gap: 30px;
}

/* Flex */

.flex {
  display: flex;

  align-items: center;
}

/* Hide */

.hidden {
  display: none;
}

/* ==========================================
   THEME TRANSITION
========================================== */

html {
  scroll-behavior: smooth;
}

body,
section,
div,
header,
footer,
nav,
button,
input,
textarea,
a {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}