/* =========================================================
   Q-NARA
   MAIN STYLES
========================================================= */

:root {

  --qnara-dark: #071c17;
  --qnara-dark-2: #0b2921;

  --qnara-green: #76d9a3;
  --qnara-green-light: #a4edc3;
  --qnara-green-dark: #2f8e64;

  --qnara-white: #ffffff;
  --qnara-muted: #71827c;

  --qnara-light: #f5f8f6;

  --qnara-border: #e3ebe7;

  --qnara-radius: 22px;

}


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


html {
  scroll-behavior: smooth;
}


body {

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  color: var(--qnara-dark);

  background: var(--qnara-white);

  overflow-x: hidden;

}


button,
a {
  -webkit-tap-highlight-color: transparent;
}


a {
  text-decoration: none;
}


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

.qnara-header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    padding 0.35s ease;

}


.qnara-header .navbar {

  padding: 25px 0;

}


.qnara-header-scrolled {

  background: rgba(7, 28, 23, 0.88);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.12);

}


.qnara-header-scrolled .navbar {

  padding: 15px 0;

}


/* =========================================================
   BRAND
========================================================= */

.qnara-brand {

  display: flex;

  align-items: center;

  gap: 11px;

}


.qnara-logo-mark {

  width: 128px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

}


.qnara-logo-mark img {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

}


.qnara-brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1;

}


.qnara-brand-text strong {

  color: white;

  font-size: 18px;

  letter-spacing: 1px;

}


.qnara-brand-text span {

  margin-top: 5px;

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

  font-size: 8px;

  letter-spacing: 2.5px;

}


.navbar-nav .nav-link {

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

  font-size: 14px;

  font-weight: 500;

  padding: 10px 14px;

  transition: 0.25s;

}


.navbar-nav .nav-link:hover {

  color: var(--qnara-green);

}


.qnara-nav-button {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 11px 18px;

  border-radius: 50px;

  color: var(--qnara-dark) !important;

  background: var(--qnara-green);

  font-size: 13px;

  font-weight: 700;

}


.qnara-nav-button:hover {

  color: var(--qnara-dark) !important;

  background: var(--qnara-green-light);

  transform: translateY(-2px);

}


.qnara-toggler {

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

  color: white;

  border-radius: 10px;

}


.qnara-toggler i {

  font-size: 25px;

}


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

.qnara-hero {

  position: relative;

  min-height: 100vh;

  overflow: hidden;

  color: white;

  background: var(--qnara-dark);

}


.hero-background {

  position: absolute;

  inset: 0;

  background-image:
    url("../../res/photos/hero-pest-control.jpeg");

  background-size: cover;

  background-position: center;

  transform: scale(1.03);

}


.hero-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4, 20, 16, 0.96) 0%,
      rgba(4, 20, 16, 0.84) 42%,
      rgba(4, 20, 16, 0.38) 100%
    );

}


.hero-glow {

  position: absolute;

  border-radius: 50%;

  filter: blur(80px);

  pointer-events: none;

}


.hero-glow-one {

  width: 500px;
  height: 500px;

  right: -180px;
  top: 15%;

  background: rgba(118, 217, 163, 0.12);

}


.hero-glow-two {

  width: 300px;
  height: 300px;

  left: 35%;
  bottom: -150px;

  background: rgba(118, 217, 163, 0.08);

}


.hero-content {

  padding-top: 100px;

}


.hero-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 24px;

  padding: 9px 15px;

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

  border-radius: 50px;

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

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

  backdrop-filter: blur(10px);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

}


.eyebrow-dot {

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--qnara-green);

  box-shadow:
    0 0 15px var(--qnara-green);

}


.hero-title {

  max-width: 900px;

  margin: 0;

  font-size: clamp(
    3.2rem,
    6.3vw,
    6.5rem
  );

  line-height: 0.98;

  letter-spacing: -4px;

  font-weight: 750;

}


.hero-title span {

  color: var(--qnara-green);

}


.hero-description {

  max-width: 650px;

  margin-top: 30px;

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

  font-size: 17px;

  line-height: 1.8;

}


.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 13px;

  margin-top: 35px;

}


.hero-primary {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 15px 22px;

  border-radius: 12px;

  border: 0;

  color: var(--qnara-dark);

  background: var(--qnara-green);

  font-weight: 700;

}


.hero-primary:hover {

  color: var(--qnara-dark);

  background: var(--qnara-green-light);

  transform: translateY(-3px);

}


.hero-secondary {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 14px 22px;

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

  border-radius: 12px;

  color: white;

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

  backdrop-filter: blur(10px);

}


.hero-secondary:hover {

  color: white;

  border-color: rgba(255,255,255,0.4);

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

}


.hero-trust {

  display: flex;

  flex-wrap: wrap;

  gap: 25px;

  margin-top: 45px;

}


.trust-item {

  display: flex;

  align-items: center;

  gap: 8px;

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

  font-size: 11px;

}


.trust-item i {

  color: var(--qnara-green);

  font-size: 16px;

}


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

.hero-floating-card {

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 18px;

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

  border-radius: 18px;

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

  backdrop-filter: blur(20px);

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

}


.floating-card-icon {

  width: 48px;
  height: 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 14px;

  color: var(--qnara-green);

  background: rgba(118,217,163,0.12);

  font-size: 22px;

}


.hero-floating-card small {

  display: block;

  margin-bottom: 5px;

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

  font-size: 8px;

  letter-spacing: 1.5px;

}


.hero-floating-card strong {

  display: block;

  max-width: 200px;

  color: white;

  font-size: 11px;

  line-height: 1.4;

}


/* =========================================================
   WALKING INSECT
========================================================= */

.insect-track {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 9%;

  height: 80px;

  pointer-events: none;

  z-index: 5;

}


.walking-insect {

  position: absolute;

  left: -80px;

  bottom: 0;

  width: 58px;

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 8px 8px rgba(0,0,0,0.35)
    );

  animation:
    insectWalk 22s linear infinite,
    insectBounce 0.32s ease-in-out infinite alternate;

}


@keyframes insectWalk {

  0% {

    left: -80px;

    transform: scaleX(1) rotate(4deg);

  }

  18% {

    left: 15%;

    transform: scaleX(1) rotate(-3deg);

  }

  35% {

    left: 32%;

    transform: scaleX(1) rotate(4deg);

  }

  50% {

    left: 48%;

    transform: scaleX(-1) rotate(-4deg);

  }

  67% {

    left: 64%;

    transform: scaleX(-1) rotate(3deg);

  }

  82% {

    left: 82%;

    transform: scaleX(-1) rotate(-4deg);

  }

  100% {

    left: calc(100% + 80px);

    transform: scaleX(-1) rotate(4deg);

  }

}


@keyframes insectBounce {

  from {
    margin-bottom: 0;
  }

  to {
    margin-bottom: 6px;
  }

}


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

.hero-scroll {

  position: absolute;

  bottom: 28px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 13px;

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

  font-size: 8px;

  letter-spacing: 2px;

}


.scroll-line {

  width: 45px;

  height: 1px;

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

}


/* =========================================================
   GENERAL SECTION
========================================================= */

.qnara-section {

  padding: 120px 0;

}


.qnara-about {

  background: white;

}


.section-label {

  margin-bottom: 18px;

  color: var(--qnara-green-dark);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2.5px;

}


.section-label.light {

  color: var(--qnara-green);

}


.section-title {

  margin: 0;

  font-size: clamp(2.5rem, 4vw, 4.2rem);

  line-height: 1.05;

  letter-spacing: -2px;

  font-weight: 750;

}


.section-title span {

  display: block;

  color: var(--qnara-green-dark);

}


.section-text {

  margin-top: 22px;

  color: var(--qnara-muted);

  line-height: 1.85;

  font-size: 15px;

}


/* =========================================================
   ABOUT
========================================================= */

.about-image-wrapper {

  position: relative;

  padding-right: 35px;

  padding-bottom: 35px;

}


.about-image-main {

  position: relative;

  min-height: 540px;

  overflow: hidden;

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      #183e31,
      #071c17
    );

}


.about-image-main img {

  width: 100%;

  height: 100%;

  min-height: 540px;

  object-fit: cover;

}


.about-image-placeholder {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 15px;

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

  text-align: center;

}


.about-image-placeholder i {

  color: var(--qnara-green);

  font-size: 60px;

}


.about-image-placeholder span {

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 3px;

  line-height: 1.8;

}


.experience-card {

  position: absolute;

  right: 0;

  bottom: 0;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 18px 22px;

  border-radius: 18px;

  color: white;

  background: var(--qnara-dark);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.18);

}


.experience-card > strong {

  color: var(--qnara-green);

  font-size: 35px;

}


.experience-card span,
.experience-card small {

  display: block;

}


.experience-card span {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

}


.experience-card small {

  margin-top: 4px;

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

  font-size: 8px;

  letter-spacing: 1px;

}


.about-features {

  display: grid;

  gap: 15px;

  margin-top: 30px;

}


.about-feature {

  display: flex;

  gap: 14px;

}


.feature-icon {

  width: 32px;
  height: 32px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 10px;

  color: var(--qnara-green-dark);

  background: #e9f8ef;

}


.about-feature strong {

  display: block;

  font-size: 14px;

}


.about-feature span {

  display: block;

  margin-top: 4px;

  color: var(--qnara-muted);

  font-size: 12px;

}


/* =========================================================
   SERVICES
========================================================= */

.qnara-services {

  background: var(--qnara-light);

}


.section-heading {

  max-width: 750px;

  margin: 0 auto;

}


.section-heading > p {

  max-width: 600px;

  margin: 25px auto 0;

  color: var(--qnara-muted);

  line-height: 1.8;

}


.service-card {

  position: relative;

  height: 100%;

  padding: 35px;

  overflow: hidden;

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

  border-radius: var(--qnara-radius);

  background: white;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;

}


.service-card:hover {

  transform: translateY(-8px);

  border-color: rgba(47,142,100,0.3);

  box-shadow:
    0 25px 60px rgba(7,28,23,0.09);

}


.service-card-highlight {

  color: white;

  background: var(--qnara-dark);

}


.service-number {

  position: absolute;

  top: 25px;

  right: 28px;

  color: #dce9e3;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 2px;

}


.service-card-highlight .service-number {

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

}


.service-icon {

  width: 58px;
  height: 58px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 28px;

  border-radius: 17px;

  color: var(--qnara-green-dark);

  background: #eaf8ef;

  font-size: 25px;

}


.service-card-highlight .service-icon {

  color: var(--qnara-dark);

  background: var(--qnara-green);

}


.service-card h3 {

  margin-bottom: 15px;

  font-size: 21px;

  font-weight: 700;

}


.service-card p {

  min-height: 85px;

  color: var(--qnara-muted);

  font-size: 13px;

  line-height: 1.8;

}


.service-card-highlight p {

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

}


.service-card a {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 15px;

  color: var(--qnara-green-dark);

  font-size: 12px;

  font-weight: 700;

}


.service-card-highlight a {

  color: var(--qnara-green);

}


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

.qnara-why {

  color: white;

  background: var(--qnara-dark);

}


.qnara-why .section-title {

  color: white;

}


.qnara-why .section-text {

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

}


.why-grid {

  display: grid;

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

  gap: 1px;

  overflow: hidden;

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

  border-radius: 24px;

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

}


.why-item {

  padding: 35px;

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

  transition: 0.3s;

}


.why-item:hover {

  background: rgba(118,217,163,0.07);

}


.why-icon {

  margin-bottom: 25px;

  color: var(--qnara-green);

  font-size: 28px;

}


.why-item h3 {

  font-size: 18px;

}


.why-item p {

  margin: 10px 0 0;

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

  font-size: 12px;

  line-height: 1.7;

}


/* =========================================================
   PROCESS
========================================================= */

.qnara-process {

  background: white;

}


.process-wrapper {

  max-width: 950px;

  margin: 70px auto 0;

}


.process-item {

  display: flex;

  align-items: flex-start;

  gap: 30px;

  padding: 30px 0;

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

}


.process-item:last-child {

  border-bottom: none;

}


.process-number {

  flex-shrink: 0;

  width: 65px;
  height: 65px;

  display: flex;

  align-items: center;
  justify-content: center;

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

  border-radius: 18px;

  color: var(--qnara-green-dark);

  background: #f4faf6;

  font-size: 12px;

  font-weight: 800;

}


.process-content h3 {

  margin: 5px 0 10px;

  font-size: 22px;

}


.process-content p {

  margin: 0;

  color: var(--qnara-muted);

  font-size: 13px;

  line-height: 1.7;

}


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

.qnara-cta {

  position: relative;

  overflow: hidden;

  padding: 80px 0;

  background: var(--qnara-dark);

}


.cta-glow {

  position: absolute;

  width: 500px;
  height: 500px;

  right: -200px;
  top: -300px;

  border-radius: 50%;

  background: rgba(118,217,163,0.12);

  filter: blur(60px);

}


.cta-inner {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  padding: 65px;

  overflow: hidden;

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

  border-radius: 30px;

  background:
    linear-gradient(
      120deg,
      rgba(118,217,163,0.1),
      rgba(255,255,255,0.025)
    );

}


.cta-content h2 {

  max-width: 650px;

  margin: 0;

  color: white;

  font-size: clamp(
    2.3rem,
    4vw,
    4rem
  );

  line-height: 1.05;

  letter-spacing: -2px;

}


.cta-content h2 span {

  color: var(--qnara-green);

}


.cta-content p {

  margin-top: 20px;

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

}


.cta-button {

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 16px 23px;

  border-radius: 12px;

  color: var(--qnara-dark);

  background: var(--qnara-green);

  font-weight: 700;

}


.cta-button:hover {

  color: var(--qnara-dark);

  background: var(--qnara-green-light);

  transform: translateY(-3px);

}


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

.qnara-footer {

  padding: 80px 0 25px;

  color: white;

  background: #04120f;

}


.footer-brand {

  display: flex;

  align-items: center;

  gap: 11px;

}


.footer-description {

  max-width: 400px;

  margin-top: 25px;

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

  font-size: 13px;

  line-height: 1.8;

}


.footer-social {

  display: flex;

  gap: 9px;

  margin-top: 25px;

}


.footer-social a {

  width: 37px;
  height: 37px;

  display: flex;

  align-items: center;
  justify-content: center;

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

  border-radius: 10px;

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

  transition: 0.25s;

}


.footer-social a:hover {

  color: var(--qnara-dark);

  background: var(--qnara-green);

  border-color: var(--qnara-green);

}


.qnara-footer h4 {

  margin-bottom: 22px;

  font-size: 13px;

  font-weight: 700;

}


.qnara-footer ul {

  margin: 0;

  padding: 0;

  list-style: none;

}


.qnara-footer li {

  margin-bottom: 13px;

}


.qnara-footer li a {

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

  font-size: 12px;

  transition: 0.2s;

}


.qnara-footer li a:hover {

  color: var(--qnara-green);

}


.footer-contact {

  display: grid;

  gap: 16px;

}


.footer-contact > div {

  display: flex;

  gap: 10px;

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

  font-size: 12px;

}


.footer-contact i {

  color: var(--qnara-green);

}


.footer-bottom {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 70px;

  padding-top: 25px;

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

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

  font-size: 10px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

  .qnara-header .navbar {

    padding: 18px 0;

  }

  .navbar-collapse {

    margin-top: 15px;

    padding: 15px;

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

    border-radius: 16px;

    background: rgba(7,28,23,0.96);

    backdrop-filter: blur(20px);

  }

  .navbar-nav .nav-link {

    padding: 11px;

  }

  .qnara-nav-button {

    display: inline-flex;

    margin-top: 8px;

  }

  .hero-title {

    letter-spacing: -3px;

  }

  .hero-content {

    padding-top: 70px;

  }

  .hero-scroll {

    display: none;

  }

}


@media (max-width: 767px) {

  .qnara-section {

    padding: 80px 0;

  }

  .hero-title {

    font-size: clamp(
      2.9rem,
      13vw,
      4.5rem
    );

    letter-spacing: -2.5px;

  }

  .hero-description {

    font-size: 14px;

  }

  .hero-trust {

    gap: 13px;

    flex-direction: column;

    margin-top: 30px;

  }

  .hero-actions {

    flex-direction: column;

    align-items: flex-start;

  }

  .about-image-wrapper {

    padding-right: 15px;

    padding-bottom: 25px;

  }

  .about-image-main {

    min-height: 400px;

  }

  .about-image-main img {

    min-height: 400px;

  }

  .why-grid {

    grid-template-columns: 1fr;

  }

  .cta-inner {

    flex-direction: column;

    align-items: flex-start;

    padding: 40px 25px;

  }

  .footer-bottom {

    flex-direction: column;

  }

  .walking-insect {

    width: 42px;

  }

}


@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .walking-insect {
    animation: none;
    left: 50%;
  }

}

.qubelab-credit {
  color: var(--qnara-green);
  font-weight: 600;
  transition: 0.25s ease;
}

.qubelab-credit:hover {
  color: var(--qnara-green-light);
}