/* =========================================================
   KOREAN MOCK TEST
   MAIN STYLESHEET
   ========================================================= */


/* ================= ROOT ================= */

:root {

  --sky-blue: #1591DC;
  --sky-blue-dark: #0875B8;
  --sky-blue-light: #EAF6FD;

  --orange: #EB7D00;
  --orange-dark: #C96400;
  --orange-light: #FFF1DF;

  --white: #FFFFFF;
  --black: #111111;

  --text: #242424;
  --text-light: #6B7075;

  --background: #F8FBFD;
  --card: #FFFFFF;
  --border: #E3E8EC;

  --shadow:
    0 18px 50px rgba(0, 0, 0, 0.08);

  --header-height: 78px;
}


/* ================= DARK MODE ================= */

body.dark {

  --background: #10171C;
  --card: #172128;

  --text: #F4F7F9;
  --text-light: #AEBBC4;

  --border: #2B3942;

  --sky-blue-light: #10364A;
  --orange-light: #442E18;
}


/* ================= RESET ================= */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}

body {

  font-family: "DM Sans", sans-serif;

  background:
    var(--background);

  color:
    var(--text);

  line-height: 1.6;

  transition:
    background 0.4s ease,
    color 0.4s ease;

  overflow-x: hidden;
}

img {
  max-width: 100%;
}

button,
a {
  font-family: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ================= CONTAINER ================= */

.container {

  width: min(1180px, 92%);

  margin-inline: auto;
}


/* ================= HEADER ================= */

.header {

  position: sticky;
  top: 0;
  z-index: 1000;

  background:
    rgba(255, 255, 255, 0.95);

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

  backdrop-filter:
    blur(15px);
}

body.dark .header {

  background:
    rgba(16, 23, 28, 0.95);
}

.nav-container {

  min-height:
    var(--header-height);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;
}


/* ================= LOGO ================= */

.logo {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex-shrink:
    0;
}

.logo-box {

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  background:
    var(--sky-blue);

  color:
    var(--white);

  border-radius:
    12px;

  font-family:
    "Manrope", sans-serif;

  font-weight:
    800;

  box-shadow:
    0 7px 18px rgba(21, 145, 220, 0.25);
}

.logo-text {

  display:
    flex;

  flex-direction:
    column;

  font-family:
    "Manrope", sans-serif;

  font-size: 18px;

  line-height:
    1.05;

  font-weight:
    800;

  white-space:
    nowrap;
}

.logo-text strong {
  color:
    var(--text);
}

.logo-text span {
  color:
    var(--orange);
}


/* ================= FLAGS ================= */

/*
   One PNG containing both Korean + Nepal flags.
*/

.flag-pair {

  width:
    70px !important;

  height:
    60px !important;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-left:
    6px;

  flex-shrink:
    0;

  overflow:
    visible;
}

.flag-pair img {

  width:
    50px !important;

  height:
    45px !important;

  max-width:
    none !important;

  object-fit:
    contain;

  display:
    block;

  transform-origin:
    center;

  animation:
    flagsWave 5.2s ease-in-out infinite;

  filter:
    drop-shadow(
      0 3px 4px rgba(0, 0, 0, 0.15)
    );
}

@keyframes flagsWave {

  0%,
  100% {

    transform:
      rotate(-3deg)
      translateY(0)
      scaleX(1);
  }

  25% {

    transform:
      rotate(2deg)
      translateY(-2px)
      scaleX(0.96);
  }

  50% {

    transform:
      rotate(4deg)
      translateY(0)
      scaleX(1.03);
  }

  75% {

    transform:
      rotate(-1deg)
      translateY(2px)
      scaleX(0.97);
  }
}


/* ================= DESKTOP NAV ================= */

.desktop-nav {

  display:
    flex;

  align-items:
    center;

  gap:
    27px;
}

.desktop-nav a {

  position:
    relative;

  color:
    var(--text-light);

  font-size: 12.6px;

  font-weight:
    600;

  transition:
    color 0.3s ease;
}

.desktop-nav a::after {

  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -7px;

  width:
    0;

  height:
    2px;

  background:
    var(--orange);

  transition:
    width 0.3s ease;
}

.desktop-nav a:hover {
  color:
    var(--sky-blue);
}

.desktop-nav a:hover::after {
  width:
    100%;
}


/* ================= NAV ACTIONS ================= */

.nav-actions {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}

.theme-toggle {

  width:
    40px;

  height:
    40px;

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

  border-radius:
    50%;

  background:
    var(--card);

  color:
    var(--text);

  font-size: 15.3px;

  transition:
    all 0.3s ease;
}

.theme-toggle:hover {

  background:
    var(--sky-blue-light);

  color:
    var(--sky-blue);
}

.nav-button {

  padding:
    10px 18px;

  background:
    var(--orange);

  color:
    var(--white);

  border-radius:
    9px;

  font-size: 12.6px;

  font-weight:
    700;

  transition:
    all 0.3s ease;
}

.nav-button:hover {

  background:
    var(--orange-dark);

  transform:
    translateY(-2px);
}

.menu-toggle {

  display:
    none;

  border:
    none;

  background:
    transparent;

  color:
    var(--text);

  font-size: 24.3px;
}


/* ================= MOBILE MENU ================= */

.mobile-menu {

  display:
    none;

  flex-direction:
    column;

  padding:
    15px 5% 22px;

  background:
    var(--card);

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

.mobile-menu.active {
  display:
    flex;
}

.mobile-menu a {

  padding:
    12px 0;

  color:
    var(--text);

  font-weight:
    600;

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

.mobile-menu a:last-child {
  border-bottom:
    none;
}


/* ================= HERO ================= */

.hero {

  position:
    relative;

  min-height:
    720px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  isolation:
    isolate;
}


/* HERO BACKGROUND */

.hero-image {

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  background-image:
    url("./images/hero.jpg");

  background-size:
    cover;

  background-position:
    center;

  background-repeat:
    no-repeat;
}


/* HERO OVERLAY */

.hero-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    linear-gradient(
      90deg,
      rgba(5, 24, 36, 0.94),
      rgba(5, 24, 36, 0.77),
      rgba(5, 24, 36, 0.48)
    );
}


/* HERO CONTENT */

.hero-content {

  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    1.05fr 0.95fr;

  align-items:
    center;

  gap:
    60px;

  padding-block:
    100px;
}


/* HERO TEXT */

.hero-text {
  color:
    white;
}

.hero-badge {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    7px 13px;

  border:
    1px solid rgba(255,255,255,0.22);

  background:
    rgba(255,255,255,0.08);

  border-radius:
    50px;

  font-size: 11.7px;

  font-weight:
    600;

  margin-bottom:
    22px;
}

.hero-badge span {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--orange);

  box-shadow:
    0 0 0 5px rgba(235, 125, 0, 0.15);
}

.hero h1 {

  max-width:
    720px;

  font-family:
    "Manrope", sans-serif;

  font-size: clamp(43.2px, 6vw, 70.2px);

  line-height:
    1.04;

  letter-spacing:
    -2px;

  font-weight:
    800;
}

.hero h1 em {

  font-family:
    "Playfair Display", serif;

  color:
    var(--orange);

  font-weight:
    700;
}

.hero-text > p {

  max-width:
    620px;

  margin-top:
    25px;

  color:
    rgba(255,255,255,0.80);

  font-size: 15.3px;
}


/* ================= HERO BUTTONS ================= */

.hero-buttons {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    13px;

  margin-top:
    30px;
}

.btn {

  min-height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  padding:
    0 20px;

  border-radius:
    9px;

  font-weight:
    700;

  transition:
    all 0.3s ease;
}

.btn-primary {

  background:
    var(--orange);

  color:
    white;
}

.btn-primary:hover {

  background:
    var(--orange-dark);

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 25px rgba(235,125,0,0.25);
}

.btn-outline {

  border:
    1px solid rgba(255,255,255,0.45);

  color:
    white;

  background:
    rgba(255,255,255,0.05);
}

.btn-outline:hover {

  background:
    white;

  color:
    var(--sky-blue-dark);

  transform:
    translateY(-3px);
}


/* ================= APP LINKS ================= */

.app-area {
  margin-top: 30px;
}

.app-title {

  margin-bottom:
    10px;

  color:
    rgba(255,255,255,0.68);

  font-size: 11.7px;

  font-weight:
    600;
}


/* Keep compatibility with previous class */

.app-availability {
  margin-top: 30px;
}

.app-availability > p {

  margin-bottom:
    10px;

  color:
    rgba(255,255,255,0.68);

  font-size: 11.7px;

  font-weight:
    600;
}

.app-links {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;
}

.store-btn {

  min-width:
    150px;

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    7px 14px;

  border:
    1px solid rgba(255,255,255,0.24);

  border-radius:
    9px;

  background:
    rgba(0,0,0,0.35);

  color:
    white;

  transition:
    all 0.3s ease;
}

.store-btn i {
  font-size: 20.7px;
}

.store-btn span {

  display:
    flex;

  flex-direction:
    column;

  line-height:
    1.1;
}

.store-btn small {

  font-size: 7.2px;

  letter-spacing:
    0.5px;

  opacity:
    0.7;
}

.store-btn strong {
  font-size: 12.6px;
}

.store-btn:hover {

  background:
    var(--sky-blue);

  border-color:
    var(--sky-blue);

  transform:
    translateY(-3px);
}


/* ================= HERO TRUST ================= */

.hero-trust {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    35px;

  margin-top:
    30px;
}

.hero-trust div {

  display:
    flex;

  flex-direction:
    column;
}

.hero-trust strong {

  font-family:
    "Manrope", sans-serif;

  font-size: 18.9px;

  color:
    white;
}

.hero-trust span {

  color:
    rgba(255,255,255,0.62);

  font-size: 10.8px;
}


/* ================= HERO CARD ================= */

.hero-card {

  max-width:
    420px;

  width:
    100%;

  margin-inline:
    auto;

  padding:
    27px;

  background:
    rgba(255,255,255,0.96);

  border:
    1px solid rgba(255,255,255,0.35);

  border-radius:
    20px;

  box-shadow:
    0 30px 80px rgba(0,0,0,0.25);
}

body.dark .hero-card {

  background:
    #172128;
}

.card-top {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  margin-bottom:
    25px;
}

.question-number {

  color:
    var(--sky-blue);

  font-size: 10.8px;

  font-weight:
    800;
}

.question-type {

  padding:
    5px 9px;

  border-radius:
    20px;

  background:
    var(--orange-light);

  color:
    var(--orange-dark);

  font-size: 9px;

  font-weight:
    800;
}

.hero-card h3 {

  font-size: 17.1px;

  line-height:
    1.4;
}

.english-question {

  margin-top:
    5px;

  color:
    var(--text-light);

  font-size: 11.7px;
}

.question-word {

  margin:
    22px 0;

  padding:
    17px;

  text-align:
    center;

  border-radius:
    12px;

  background:
    var(--sky-blue-light);

  color:
    var(--sky-blue-dark);

  font-family:
    "Manrope", sans-serif;

  font-size: 27.9px;

  font-weight:
    800;
}

.options {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    9px;
}

.options button {

  padding:
    12px;

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

  border-radius:
    8px;

  background:
    var(--card);

  color:
    var(--text);

  text-align:
    left;

  transition:
    all 0.25s ease;
}

.options button:hover {

  border-color:
    var(--sky-blue);

  background:
    var(--sky-blue-light);

  color:
    var(--sky-blue-dark);
}

.check-answer {

  width:
    100%;

  margin-top:
    15px;

  padding:
    13px;

  border:
    none;

  border-radius:
    9px;

  background:
    var(--sky-blue);

  color:
    white;

  font-weight:
    700;

  transition:
    all 0.3s ease;
}

.check-answer:hover {

  background:
    var(--sky-blue-dark);
}


/* ================= SECTIONS ================= */

.section {

  padding:
    105px 0;
}

.section-heading {

  max-width:
    700px;

  margin-bottom:
    48px;
}

.section-label {

  display:
    inline-block;

  color:
    var(--orange);

  font-size: 10.8px;

  letter-spacing:
    1.5px;

  font-weight:
    800;

  margin-bottom:
    10px;
}

.section-heading h2 {

  font-family:
    "Manrope", sans-serif;

  font-size: clamp(28.8px, 4vw, 43.2px);

  line-height:
    1.15;

  letter-spacing:
    -1px;
}

.section-heading h2 span {
  color:
    var(--sky-blue);
}

.section-heading p {

  margin-top:
    14px;

  color:
    var(--text-light);
}


/* ================= FREE TEST ================= */

.free-section {

  background:
    var(--background);
}


/* Current HTML uses .free-card */

.free-card {

  display:
    grid;

  grid-template-columns:
    85px 1fr;

  overflow:
    hidden;

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

  border-radius:
    18px;

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.free-card:hover {

  transform:
    translateY(-7px);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.11);
}

.free-number {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding-top:
    28px;

  background:
    var(--sky-blue);

  color:
    white;

  font-family:
    "Manrope", sans-serif;

  font-size: 18px;

  font-weight:
    800;
}

.free-content {

  padding:
    30px;
}

.free-tag {

  display:
    inline-block;

  padding:
    4px 9px;

  background:
    var(--orange-light);

  color:
    var(--orange-dark);

  border-radius:
    5px;

  font-size: 9px;

  font-weight:
    800;
}

.free-content h3 {

  margin-top:
    10px;

  font-family:
    "Manrope", sans-serif;

  font-size: 22.5px;
}

.free-content p {

  margin-top:
    8px;

  color:
    var(--text-light);
}

.free-meta {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    15px;
    padding-bottom: 15px;
}

.free-meta span {

  padding:
    6px 10px;

  border-radius:
    20px;

  background:
    var(--sky-blue-light);

  color:
    var(--sky-blue-dark);

  font-size: 9.9px;

  font-weight:
    700;
}


/* Compatibility with old selectors */

.free-test-wrapper {

  display:
    flex;

  justify-content:
    center;
}

.free-test-card {

  width:
    min(720px, 100%);
}


/* ================= SET CARD COMPATIBILITY ================= */

.set-card {

  display:
    grid;

  grid-template-columns:
    85px 1fr;

  overflow:
    hidden;

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

  border-radius:
    18px;

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.set-card:hover {

  transform:
    translateY(-7px);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.11);
}

.set-number {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding-top:
    28px;

  background:
    var(--sky-blue);

  color:
    white;

  font-family:
    "Manrope", sans-serif;

  font-size: 18px;

  font-weight:
    800;
}

.set-content {
  padding:
    30px;
}

.set-tag {

  display:
    inline-block;

  padding:
    4px 9px;

  background:
    var(--orange-light);

  color:
    var(--orange-dark);

  border-radius:
    5px;

  font-size: 9px;

  font-weight:
    800;
}

.set-content h3 {

  margin-top:
    10px;

  font-family:
    "Manrope", sans-serif;

  font-size: 22.5px;
}

.set-content p {

  margin-top:
    8px;

  color:
    var(--text-light);
}

.set-meta {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-top:
    20px;
}

.set-meta span {

  padding:
    6px 10px;

  border-radius:
    20px;

  background:
    var(--sky-blue-light);

  color:
    var(--sky-blue-dark);

  font-size: 9.9px;

  font-weight:
    700;
}

.practice-btn {

  margin-top:
    22px;

  padding:
    12px 18px;

  border:
    none;

  border-radius:
    8px;

  background:
    var(--orange);

  color:
    white;

  font-weight:
    700;

  transition:
    all 0.3s ease;
}

.practice-btn:hover {

  background:
    var(--orange-dark);

  transform:
    translateY(-2px);
}


/* ================= HOW IT WORKS ================= */

.how-section {

  background:
    var(--sky-blue-light);
}

.steps-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    25px;
}

.step {

  padding:
    30px;

  background:
    var(--card);

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

  border-radius:
    17px;
}

.step-icon {

  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  background:
    var(--orange);

  color:
    white;

  border-radius:
    12px;

  font-weight:
    800;

  margin-bottom:
    20px;
}

.step h3 {
  font-size: 18px;
}

.step p {

  margin-top:
    9px;

  color:
    var(--text-light);
}


/* ================= PRICING ================= */

.packages-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    22px;
}

.package-card {

  position:
    relative;

  padding:
    32px;

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

  border-radius:
    18px;

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.35s ease;
}

.package-card:hover {

  transform:
    translateY(-7px);
}

.package-card.popular {

  border:
    2px solid var(--orange);
}

.popular-label {

  position:
    absolute;

  top:
    18px;

  right:
    18px;

  padding:
    5px 8px;

  background:
    var(--orange);

  color:
    white;

  border-radius:
    5px;

  font-size: 8.1px;

  font-weight:
    800;
}


/* Current HTML package classes */

.package-price {

  color:
    var(--sky-blue);

  font-family:
    "Manrope", sans-serif;

  font-size: 33.3px;

  line-height:
    1.1;

  font-weight:
    800;
}

.model-count {

  margin-top:
    12px;

  color:
    var(--sky-blue);

  font-size: 11.7px;

  font-weight:
    800;

  letter-spacing:
    0.8px;
}


/* Compatibility with old HTML */

.package-name {

  color:
    var(--sky-blue);

  font-size: 11.7px;

  font-weight:
    800;

  letter-spacing:
    0.8px;
}

.package-card h3 {

  margin-top:
    12px;

  font-family:
    "Manrope", sans-serif;

  font-size: 33.3px;
}

.package-card p {

  margin-top:
    8px;

  color:
    var(--text-light);
}

.package-btn {

  width:
    100%;

  margin-top:
    24px;

  padding:
    13px;

  border:
    none;

  border-radius:
    8px;

  background:
    var(--sky-blue);

  color:
    white;

  font-weight:
    700;

  transition:
    all 0.3s ease;
}

.package-btn:hover {

  background:
    var(--sky-blue-dark);
}

.price-note {

  margin-top:
    20px;

  text-align:
    center;

  color:
    var(--text-light);

  font-size: 10.8px;
}


/* ================= WHY US ================= */

.why-section {

  background:
    var(--orange-light);
}

.why-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    18px;
}

.why-card {

  padding:
    25px;

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

  border-radius:
    16px;

  background:
    var(--card);
}

.why-icon {

  width:
    45px;

  height:
    45px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    11px;

  background:
    var(--sky-blue);

  color:
    white;

  font-size: 17.1px;

  margin-bottom:
    18px;
}

.why-card h3 {
  font-size: 16.2px;
}

.why-card p {

  margin-top:
    8px;

  color:
    var(--text-light);

  font-size: 12.6px;
}


/* ================= TEAM ================= */

.team-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    22px;
}

.team-card {

  overflow:
    hidden;

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

  border-radius:
    18px;

  background:
    var(--card);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.35s ease;
}

.team-card:hover {

  transform:
    translateY(-7px);
}

.profile-photo {

  height:
    310px;

  overflow:
    hidden;

  background:
    var(--sky-blue-light);
}

.profile-photo img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  display:
    block;

  transition:
    transform 0.5s ease;
}

.team-card:hover .profile-photo img {

  transform:
    scale(1.05);
}

.team-info {
  padding:
    25px;
}

.team-info > span {

  color:
    var(--orange);

  font-size: 9px;

  font-weight:
    800;

  letter-spacing:
    1.2px;
}

.team-info h3 {

  margin-top:
    5px;

  font-family:
    "Manrope", sans-serif;

  font-size: 20.7px;
}

.team-info p {

  margin-top:
    8px;

  color:
    var(--text-light);

  font-size: 12.6px;
}


/* ================= FAQ ================= */

.faq-container {

  max-width:
    850px;
}

.faq {

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

.faq summary {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    20px 0;

  cursor:
    pointer;

  list-style:
    none;

  font-weight:
    700;
}

.faq summary::-webkit-details-marker {
  display:
    none;
}

.faq summary span {

  color:
    var(--orange);

  font-size: 19.8px;

  transition:
    transform 0.3s ease;
}

.faq[open] summary span {

  transform:
    rotate(45deg);
}

.faq p {

  padding:
    0 40px 20px 0;

  color:
    var(--text-light);
}


/* ================= CTA ================= */

.cta-section {

  position:
    relative;

  min-height:
    450px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;

  background:
    url("https://images.unsplash.com/photo-1523050854058-8df90110c9f1?auto=format&fit=crop&w=2000&q=85")
    center / cover no-repeat;
}

.cta-overlay {

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(5,24,36,0.94),
      rgba(5,24,36,0.62)
    );
}

.cta-content {

  position:
    relative;

  z-index:
    2;

  color:
    white;
}

.cta-content > span {

  color:
    var(--orange);

  font-size: 10.8px;

  font-weight:
    800;

  letter-spacing:
    1.5px;
}

.cta-content h2 {

  max-width:
    650px;

  margin-top:
    10px;

  font-family:
    "Manrope", sans-serif;

  font-size: clamp(31.5px, 5vw, 52.2px);

  line-height:
    1.1;
}

.cta-content p {

  max-width:
    560px;

  margin:
    18px 0 25px;

  color:
    rgba(255,255,255,0.72);
}


/* ================= FOOTER ================= */

.footer {

  padding-top:
    70px;

  background:
    #10171C;

  color:
    white;
}

.footer-grid {

  display:
    grid;

  grid-template-columns:
    2fr 1fr 1fr 1fr;

  gap:
    40px;

  padding-bottom:
    55px;
}

.footer-logo .logo-text strong {
  color:
    white;
}

.footer p {

  margin-top:
    16px;

  max-width:
    300px;

  color:
    #AEBBC4;

  font-size: 12.6px;
}

.footer h4 {

  margin-bottom:
    14px;

  font-family:
    "Manrope", sans-serif;
}

.footer-grid > div > a:not(.logo) {

  display:
    block;

  margin:
    9px 0;

  color:
    #AEBBC4;

  font-size: 12.6px;

  transition:
    color 0.3s ease;
}

.footer-grid > div > a:not(.logo):hover {

  color:
    var(--orange);
}

.footer-apps a {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin:
    9px 0;

  color:
    #AEBBC4;

  font-size: 12.6px;

  transition:
    color 0.3s ease;
}

.footer-apps a:hover {
  color:
    var(--sky-blue);
}

.footer-apps i {
  font-size: 15.3px;
}

.footer-bottom {

  padding:
    20px 5%;

  border-top:
    1px solid rgba(255,255,255,0.08);

  text-align:
    center;
}

.footer-bottom p {

  max-width:
    none;

  margin:
    0;

  font-size: 10.8px;
}


/* ================= WHATSAPP ================= */

.whatsapp-button {

  position:
    fixed;

  right:
    22px;

  bottom:
    22px;

  z-index:
    900;

  width:
    54px;

  height:
    54px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #25D366;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.2);

  transition:
    transform 0.3s ease;
}

.whatsapp-button:hover {

  transform:
    scale(1.08);
}

.whatsapp-button i {

  font-size: 25.2px;

  color:
    white;
}


/* ================= BACK TO TOP ================= */

.back-to-top {

  position:
    fixed;

  right:
    22px;

  bottom:
    90px;

  z-index:
    899;

  width:
    42px;

  height:
    42px;

  border:
    none;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    var(--white);

  font-size: 16.2px;

  font-weight:
    700;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(15px);

  transition:
    all 0.3s ease;

  box-shadow:
    0 8px 20px rgba(235, 125, 0, 0.25);
}

.back-to-top:hover {

  background:
    var(--orange-dark);

  color:
    var(--white);

  transform:
    translateY(0) scale(1.08);
}

.back-to-top.show {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);
}


/* ================= REVEAL ANIMATION ================= */

.reveal {

  opacity:
    0;

  transform:
    translateY(30px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.reveal.visible {

  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================================
   TABLET / iPAD
   601px - 1000px
   ========================================================= */

@media (max-width: 1000px) {

  /* ---------- HEADER ---------- */

  .desktop-nav {
    display:
      none;
  }

  .nav-button {
    display:
      none;
  }

  .menu-toggle {

    display:
      grid;

    place-items:
      center;
  }

  .nav-container {

    min-height:
      68px;

    gap:
      10px;
  }


  /* ---------- HERO ---------- */

  .hero {
    min-height:
      auto;
  }

  .hero-content {

    grid-template-columns:
      1fr;

    gap:
      45px;

    padding-block:
      75px;
  }

  .hero-text {
    max-width:
      760px;

    margin-inline:
      auto;

    width:
      100%;
  }

  .hero-card {

    max-width:
      500px;
  }


  /* ---------- SECTIONS ---------- */

  .section {
    padding:
      80px 0;
  }


  /* ---------- HOW IT WORKS ---------- */

  .steps-grid {

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      18px;
  }


  /* ---------- PACKAGES ---------- */

  .packages-grid {

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      18px;
  }


  /* ---------- WHY ---------- */

  .why-grid {

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      18px;
  }


  /* ---------- TEAM ---------- */

  .team-grid {

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      18px;
  }

 /* ================= TEAM RESPONSIVE FIX ================= */

@media (max-width: 1000px) {

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-card:last-child {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
    width: 100%;
  }

}


@media (max-width: 600px) {

  .team-grid {
    grid-template-columns: 1fr;
  }

  .team-card,
  .team-card:last-child {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .profile-photo {
    width: 100%;
    height: 220px;
  }

  .profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .team-info {
    padding: 15px;
  }

}


  /* ---------- FOOTER ---------- */

  .footer-grid {

    grid-template-columns:
      2fr 1fr 1fr;

    gap:
      30px;
  }

  .footer-brand {
    grid-column:
      1 / -1;
  }
}


/* =========================================================
   SMALL TABLET
   601px - 750px
   ========================================================= */

@media (max-width: 750px) {

  .container {

    width:
      100%;

    padding-left:
      22px;

    padding-right:
      22px;
  }

  .logo-text {
    font-size: 15.3px;
  }

  .logo-box {

    width:
      38px;

    height:
      38px;
  }

  .flag-pair {

    width:
      58px !important;

    height:
      48px !important;
  }

  .flag-pair img {

    width:
      45px !important;

    height:
      42px !important;
  }

  .hero h1 {

    font-size: clamp(37.8px, 8vw, 52.2px);
  }

  .hero-text > p {
    font-size: 13.5px;
  }

  .app-links {
    flex-direction:
      row;
  }

  .store-btn {
    min-width:
      145px;
  }

  .free-card {

    grid-template-columns:
      65px 1fr;
  }

  .profile-photo {
    height:
      270px;
  }

  .footer-grid {

    grid-template-columns:
      repeat(2, 1fr);
  }

  .footer-brand {
    grid-column:
      1 / -1;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  /* ---------- GENERAL ---------- */

  .container {

    width:
      100%;

    padding-left:
      16px;

    padding-right:
      16px;
  }


  /* ---------- HEADER ---------- */

  .nav-container {

    min-height:
      56px;

    gap:
      5px;
  }

  .logo {

    gap:
      5px;

    min-width:
      0;
  }

  .logo-box {

    width:
      32px;

    height:
      32px;

    border-radius:
      8px;

    font-size: 9.9px;

    flex-shrink:
      0;
  }

  .logo-text {

    font-size: 11.7px;

    line-height:
      1.05;

    white-space:
      nowrap;
  }

  .logo-text strong {
    font-size: 13.5px;
  }


  /* ---------- FLAGS ---------- */

  .flag-pair {

    width:
      45px !important;

    height:
      38px !important;

    margin-left:
      1px;

    flex-shrink:
      0;
  }

  .flag-pair img {

    width:
      38px !important;

    height:
      38px !important;
  }


  /* ---------- HEADER BUTTONS ---------- */

  .nav-button {
    display:
      none;
  }

  .theme-toggle {

    width:
      32px;

    height:
      32px;

    font-size: 11.7px;

    flex-shrink:
      0;
  }

  .menu-toggle {

    width:
      32px;

    height:
      32px;

    font-size: 15.3px;

    flex-shrink:
      0;
  }


  /* ---------- HERO ---------- */

  .hero {

    min-height:
      auto;
  }

  .hero-content {

    padding-block:
      48px 42px;

    gap:
      25px;
  }

  .hero h1 {

    font-size: clamp(30.6px, 10vw, 41.4px);

    line-height:
      1.08;

    letter-spacing:
      -1px;

    margin-bottom:
      14px;
  }

  .hero-text > p {

    font-size: 11.7px;

    line-height:
      1.6;

    margin-bottom:
      18px;
  }


  /* ---------- HERO BADGE ---------- */

  .hero-badge {

    font-size: 9px;

    padding:
      6px 9px;

    margin-bottom:
      13px;
  }


  /* ---------- HERO BUTTONS ---------- */

  .hero-buttons {

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      9px;
  }

  .btn {

    width:
      100%;

    min-height:
      42px;

    padding:
      10px 14px;

    font-size: 10.8px;
  }


  /* ---------- APP STORE ---------- */

  .app-area {
    margin-top:
      22px;
  }

  .app-title {
    font-size: 9.9px;
  }

  .app-links {

    flex-direction:
      column;

    gap:
      8px;
  }

  .store-btn {

    width:
      100%;

    min-height:
      45px;

    padding:
      8px 12px;
  }

  .store-btn i {
    font-size: 16.2px;
  }

  .store-btn small {
    font-size: 6.3px;
  }

  .store-btn strong {
    font-size: 10.8px;
  }


  /* ---------- HERO TRUST ---------- */

  .hero-trust {

    gap:
      13px;

    margin-top:
      18px;
  }

  .hero-trust div {
    font-size: 8.1px;
  }

  .hero-trust strong {
    font-size: 12.6px;
  }

  .hero-trust span {
    font-size: 8.1px;
  }


  /* ---------- HERO QUESTION CARD ---------- */

  .hero-card {

    padding:
      16px;

    border-radius:
      14px;
  }

  .card-top {
    margin-bottom:
      15px;
  }

  .question-number {
    font-size: 9px;
  }

  .question-type {
    font-size: 7.2px;

    padding:
      4px 7px;
  }

  .hero-card h3 {

    font-size: 14.4px;

    line-height:
      1.4;
  }

  .english-question {
    font-size: 9.9px;
  }

  .question-word {

    font-size: 20.7px;

    margin:
      13px 0;
  }

  .options {

    grid-template-columns:
      1fr;

    gap:
      7px;
  }

  .options button {

    padding:
      9px 10px;

    font-size: 9.9px;
  }

  .check-answer {

    padding:
      10px;

    font-size: 9.9px;
  }


  /* ---------- SECTIONS ---------- */

  .section {
    padding:
      48px 0;
  }

  .section-heading {

    margin-bottom:
      25px;
  }

  .section-label {

    font-size: 8.1px;

    letter-spacing:
      1px;
  }

  .section-heading h2 {

    font-size: 24.3px;

    line-height:
      1.12;

    letter-spacing:
      -0.7px;

    margin:
      7px 0 9px;
  }

  .section-heading p {

    font-size: 10.8px;

    line-height:
      1.55;
  }


  /* ---------- FREE SET ---------- */

  .free-card {

    grid-template-columns:
      45px 1fr;

    border-radius:
      13px;
  }

  .free-number {

    font-size: 18.9px;
  }

  .free-content {

    padding:
      16px;
  }

  .free-content h3 {

    font-size: 14.4px;
  }

  .free-content p {

    font-size: 9.9px;

    line-height:
      1.55;
  }

  .free-meta {

    font-size: 9px;

    gap:
      8px;
  }

  .free-meta span {
    padding:
      5px 8px;
  }

  .practice-btn {

    padding:
      9px 11px;

    font-size: 9.9px;
  }


  /* ---------- OLD SET CARD ---------- */

  .set-card {

    grid-template-columns:
      45px 1fr;

    border-radius:
      13px;
  }

  .set-number {
    font-size: 18.9px;
  }

  .set-content {
    padding:
      16px;
  }

  .set-content h3 {
    font-size: 14.4px;
  }

  .set-content p {

    font-size: 9.9px;

    line-height:
      1.55;
  }

  .set-meta {

    font-size: 9px;

    gap:
      8px;
  }


  /* ---------- HOW IT WORKS ---------- */

  .steps-grid {

    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .step {

    padding:
      16px;

    border-radius:
      13px;
  }

  .step-icon {

    width:
      34px;

    height:
      34px;

    font-size: 9px;

    margin-bottom:
      12px;
  }

  .step h3 {

    font-size: 13.5px;

    margin:
      9px 0 5px;
  }

  .step p {

    font-size: 9.9px;

    line-height:
      1.55;
  }


  /* ---------- PACKAGES ---------- */

  .packages-grid {

    grid-template-columns:
      1fr;

    gap:
      12px;
  }

  .package-card {

    padding:
      18px 16px;

    border-radius:
      14px;
  }

  .package-price {

    font-size: 24.3px;
  }

  .model-count {

    font-size: 8.1px;

    margin-top:
      7px;
  }

  .package-name {
    font-size: 8.1px;
  }

  .package-card h3 {

    font-size: 24.3px;

    margin:
      7px 0;
  }

  .package-card p {

    font-size: 9.9px;

    line-height:
      1.5;
  }

  .package-btn {

    width:
      100%;

    padding:
      10px;

    font-size: 9.9px;
  }

  .popular-label {

    top:
      12px;

    right:
      12px;

    font-size: 7.2px;
  }


  /* ---------- WHY US ---------- */

  .why-grid {

    grid-template-columns:
      1fr;

    gap:
      11px;
  }

  .why-card {

    padding:
      16px;

    border-radius:
      13px;
  }

  .why-icon {

    width:
      34px;

    height:
      34px;

    font-size: 11.7px;

    margin-bottom:
      12px;
  }

  .why-card h3 {

    font-size: 13.5px;

    margin:
      9px 0 5px;
  }

  .why-card p {

    font-size: 9.9px;

    line-height:
      1.55;
  }


  /* ---------- TEAM ---------- */

  .team-grid {

    grid-template-columns:
      1fr;

    gap:
      14px;
  }

  .team-card {

    border-radius:
      13px;
  }

  .profile-photo {

    height:
      220px;
  }

  .team-info {

    padding:
      15px;
  }

  .team-info span {

    font-size: 7.2px;
  }

  .team-info h3 {

    font-size: 14.4px;

    margin:
      6px 0;
  }

  .team-info p {

    font-size: 9.9px;

    line-height:
      1.55;
  }


  /* ---------- FAQ ---------- */

  .faq summary {

    padding:
      12px 0;

    font-size: 10.8px;
  }

  .faq summary span {
    font-size: 16.2px;
  }

  .faq p {

    padding:
      0 13px 13px 0;

    font-size: 9.9px;

    line-height:
      1.55;
  }


  /* ---------- CTA ---------- */

  .cta-section {

    min-height:
      360px;

    padding:
      48px 0;
  }

  .cta-content span {
    font-size: 8.1px;
  }

  .cta-content h2 {

    font-size: 23.4px;

    line-height:
      1.15;

    margin:
      8px 0;
  }

  .cta-content p {

    font-size: 9.9px;

    line-height:
      1.55;
  }

  .cta-content .btn {

    font-size: 9.9px;

    padding:
      10px 14px;
  }


  /* ---------- FOOTER ---------- */

  .footer-grid {

    grid-template-columns:
      1fr;

    gap:
      22px;
  }

  .footer {

    padding-top:
      38px;
  }

  .footer p,
  .footer a {
    font-size: 9.9px;
  }

  .footer h4 {

    font-size: 10.8px;

    margin-bottom:
      8px;
  }

  .footer-bottom {

    font-size: 8.1px;

    padding:
      15px;
  }


  /* ---------- FLOATING BUTTONS ---------- */

  .whatsapp-button {

    width:
      40px;

    height:
      40px;

    right:
      14px;

    bottom:
      14px;
  }

  .whatsapp-button i {
    font-size: 17.1px;
  }

  .back-to-top {

    width:
      36px;

    height:
      36px;

    right:
      14px;

    bottom:
      63px;

    font-size: 13.5px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .logo-text strong {
    font-size: 11.7px;
  }

  .logo-text {
    font-size: 9.9px;
  }

  .logo-box {

    width:
      29px;

    height:
      29px;

    font-size: 9px;
  }

  .flag-pair {

    width:
      39px !important;

    height:
      34px !important;
  }

  .flag-pair img {

    width:
      34px !important;

    height:
      34px !important;
  }

  .theme-toggle,
  .menu-toggle {

    width:
      29px;

    height:
      29px;
  }

  .hero h1 {

    font-size: 28.8px;
  }

  .hero-badge {

    font-size: 8.1px;
  }

  .hero-trust {
    gap:
      9px;
  }

  .hero-trust strong {
    font-size: 10.8px;
  }

  .hero-trust span {
    font-size: 7.2px;
  }
}
/* =========================================================
   KMT APPLICATION INTEGRATION
   Original landing design preserved
   ========================================================= */

.nav-login-button {
  padding: 9px 17px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  color: var(--text);
  font-size: 12.6px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.nav-login-button:hover {
  border-color: var(--sky-blue);
  color: var(--sky-blue);
  transform: translateY(-2px);
}

.mobile-auth-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 15px;
}

.mobile-auth-links a {
  padding: 11px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
  text-align: center;
}

.mobile-auth-links a:last-child {
  border-color: var(--orange) !important;
  background: var(--orange);
  color: white;
}

.company-profile {
  display: grid;
  place-items: center;
}

.company-initials {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      var(--sky-blue),
      var(--sky-blue-dark)
    );
  color: white;
  font-family: "Manrope", sans-serif;
  font-size: 34.2px;
  font-weight: 800;
}

.company-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--sky-blue);
  font-size: 11.7px;
  font-weight: 700;
}

.company-link:hover {
  color: var(--orange);
}

.company-contact,
.company-projects {
  margin-top: 12px;
  font-size: 11.7px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .nav-login-button {
    display: none;
  }
}
/* =========================================================
   UPDATED TEAM / ABOUT
   ========================================================= */

.team-grid {
  grid-template-columns: repeat(3, 1fr);
}

.logo-photo {
  display: grid;
  place-items: center;
  padding: 35px;
}

.logo-photo img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.company-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--sky-blue);
  font-size: 11.7px;
  font-weight: 700;
}

.company-link:hover {
  color: var(--orange);
}

.package-btn {
  display: block;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 1000px) {

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 600px) {

  .team-grid {
    grid-template-columns: 1fr;
  }

  .logo-photo {
    padding: 28px;
  }

}

/* KMT_TEXT_SIZE_REDUCED_10_PERCENT */
/* =========================================================
   INTERACTIVE 3 QUESTION DEMO
   ========================================================= */

.demo-question-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

.demo-question-tab {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--text-light);
  font-weight: 800;
  transition: all 0.25s ease;
}

.demo-question-tab:hover {
  border-color: var(--sky-blue);
  color: var(--sky-blue);
}

.demo-question-tab.active {
  border-color: var(--sky-blue);
  background: var(--sky-blue);
  color: white;
}

.demo-question-tab.completed {
  border-color: #29a66a;
  background: #29a66a;
  color: white;
}

.options button.demo-selected {
  border-color: var(--sky-blue);
  background: var(--sky-blue-light);
  color: var(--sky-blue-dark);
}

.options button.demo-correct {
  border-color: #29a66a;
  background: rgba(41, 166, 106, 0.12);
  color: #29a66a;
}

.demo-answer-message {
  min-height: 22px;
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.demo-answer-message.correct {
  color: #29a66a;
}

.demo-answer-message.error {
  color: #e35454;
}


/* ================= CELEBRATION ================= */

.demo-celebration {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    rgba(4, 13, 20, 0.68);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition:
    opacity 0.35s ease;
}

.demo-celebration.show {
  opacity: 1;
}

.celebration-message {
  position: relative;
  z-index: 3;
  width: min(460px, 90%);
  padding: 38px 32px;
  border:
    1px solid rgba(
      255,
      255,
      255,
      0.15
    );
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      #172128,
      #10171c
    );
  color: white;
  text-align: center;
  box-shadow:
    0 30px 100px
    rgba(0,0,0,0.45);
  animation:
    celebrationPop
    0.55s
    cubic-bezier(
      .2,
      .9,
      .3,
      1.25
    );
}

.celebration-icon {
  font-size: 55px;
  animation:
    celebrationBounce
    1s ease infinite;
}

.celebration-message h2 {
  margin-top: 10px;
  color: white;
  font-size: 34px;
}

.celebration-message p {
  margin-top: 9px;
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}

.celebration-message > a {
  display: inline-flex;
  margin-top: 24px;
  padding: 12px 20px;
  border-radius: 9px;
  background: var(--orange);
  color: white;
  font-weight: 800;
}

.celebration-close {
  position: absolute;
  top: 10px;
  right: 13px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color:
    rgba(
      255,
      255,
      255,
      0.65
    );
  font-size: 25px;
}


/* Confetti covers the full website viewport */

.confetti-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -40px;
  color: var(--orange);
  animation:
    confettiFall
    linear
    infinite;
}

.confetti-piece:nth-child(3n) {
  color: #1591dc;
}

.confetti-piece:nth-child(3n + 1) {
  color: #ffd84d;
}

.confetti-piece:nth-child(4n) {
  color: #eb4d8a;
}

.confetti-piece:nth-child(5n) {
  color: #50d890;
}

@keyframes confettiFall {

  0% {
    transform:
      translateY(-10vh)
      rotate(0deg);
    opacity: 1;
  }

  100% {
    transform:
      translateY(115vh)
      rotate(
        var(
          --confetti-rotate
        )
      );
    opacity: 0.7;
  }

}

@keyframes celebrationPop {

  0% {
    transform:
      scale(0.6);
    opacity: 0;
  }

  100% {
    transform:
      scale(1);
    opacity: 1;
  }

}

@keyframes celebrationBounce {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-4deg);
  }

  50% {
    transform:
      translateY(-8px)
      rotate(4deg);
  }

}

@media (max-width: 600px) {

  .demo-question-tab {
    width: 29px;
    height: 29px;
    font-size: 10px;
  }

  .celebration-message {
    padding: 31px 22px;
  }

  .celebration-message h2 {
    font-size: 27px;
  }

}
/* =========================================================
   KOREAN MOCK TEST OFFICIAL LOGO
   ========================================================= */

.kmt-main-logo {
  display: flex;
  align-items: center;
}

.kmt-main-logo img {
  width: 118px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.kmt-footer-logo img {
  width: 145px;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 600px) {

  .kmt-main-logo img {
    width: 82px;
    height: 48px;
  }

  .kmt-footer-logo img {
    width: 115px;
  }

}

/* ================= LIVE PACKAGE STATES ================= */

.packages-loading,
.packages-empty {
  grid-column: 1 / -1;
  padding: 38px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--text-light);
  text-align: center;
  font-weight: 600;
}