/* =========================================================
   AKR FURNITURE & ELECTRONICS
   COLORFUL / MODERN / RESPONSIVE CSS
========================================================= */

:root {

  --dark: #0f172a;
  --dark-2: #111827;
  --dark-3: #1e293b;

  --yellow: #facc15;
  --orange: #f97316;
  --red: #ef4444;

  --blue: #2563eb;
  --cyan: #06b6d4;
  --green: #22c55e;

  --white: #ffffff;
  --light: #f8fafc;
  --gray: #64748b;
  --border: #e2e8f0;

  --shadow:
    0 20px 60px rgba(15, 23, 42, 0.12);

  --shadow-heavy:
    0 30px 80px rgba(15, 23, 42, 0.22);

  --radius: 24px;

  --transition:
    all 0.35s ease;

}


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

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

html {
  scroll-behavior: smooth;
}

body {

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

  color: var(--dark);

  background:
    #ffffff;

  overflow-x: hidden;

}

img {
  max-width: 100%;
  display: block;
}

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

button {
  font-family: inherit;
}

.container {

  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin: auto;

}


/* =========================================================
   LOADER
========================================================= */

.page-loader {

  position: fixed;

  inset: 0;

  background:
    var(--dark);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 99999;

  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;

}

.page-loader.hide {

  opacity: 0;

  visibility: hidden;

}

.loader-box {

  text-align: center;

  color: white;

}

.loader-logo {

  width: 80px;
  height: 80px;

  border-radius: 22px;

  display: grid;

  place-items: center;

  margin: auto;

  background:
    linear-gradient(
      135deg,
      var(--yellow),
      var(--orange)
    );

  color: var(--dark);

  font-size: 30px;

  font-weight: 900;

  animation:
    loaderPulse 1.2s infinite;

}

.loader-line {

  width: 160px;

  height: 4px;

  background:
    linear-gradient(
      90deg,
      var(--yellow),
      var(--orange),
      var(--red)
    );

  margin: 25px auto 15px;

  border-radius: 20px;

  animation:
    loaderWidth 1.3s infinite;

}

.loader-box p {

  font-size: 13px;

  color: #cbd5e1;

}


@keyframes loaderPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

}

@keyframes loaderWidth {

  0% {
    transform: scaleX(0.4);
  }

  50% {
    transform: scaleX(1);
  }

  100% {
    transform: scaleX(0.4);
  }

}


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

.header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 5000;

  background:
    rgba(15, 23, 42, 0.92);

  backdrop-filter:
    blur(20px);

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

}

.nav-container {

  min-height: 82px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

}

.brand-logo {

  display: flex;

  align-items: center;

  gap: 12px;

}

.logo-image {

  width: 48px;
  height: 48px;

  overflow: hidden;

  border-radius: 13px;

  background:
    white;

}

.logo-image img {

  width: 100%;
  height: 100%;

  object-fit: contain;

}

.logo-text {

  display: flex;

  flex-direction: column;

}

.logo-text strong {

  font-size: 24px;

  line-height: 1;

  color:
    var(--yellow);

  font-weight: 900;

}

.logo-text span {

  color: white;

  font-size: 8px;

  letter-spacing: 1px;

  font-weight: 700;

}

.desktop-nav {

  display: flex;

  align-items: center;

  gap: 5px;

}

.desktop-nav a {

  color: #e2e8f0;

  font-size: 13px;

  font-weight: 600;

  padding: 10px 12px;

  border-radius: 10px;

  transition:
    var(--transition);

}

.desktop-nav a:hover {

  color: var(--dark);

  background:
    var(--yellow);

}

.menu-btn {

  display: none;

  width: 45px;
  height: 45px;

  border: 0;

  border-radius: 12px;

  background:
    var(--yellow);

  cursor: pointer;

}

.menu-btn span {

  display: block;

  width: 22px;

  height: 2px;

  margin: 5px auto;

  background:
    var(--dark);

}

.mobile-nav {

  display: none;

}


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

.hero {

  position: relative;

  min-height: 850px;

  padding-top: 150px;

  padding-bottom: 100px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 80% 20%,
      rgba(37, 99, 235, 0.35),
      transparent 35%
    ),

    linear-gradient(
      135deg,
      #020617,
      #0f172a 55%,
      #172554
    );

  color: white;

}

.hero-grid {

  display: grid;

  grid-template-columns:
    1.05fr
    0.95fr;

  align-items: center;

  gap: 70px;

  min-height: 650px;

}

.hero-label {

  display: inline-flex;

  padding: 9px 16px;

  border-radius: 50px;

  background:
    rgba(250, 204, 21, 0.12);

  border:
    1px solid rgba(250, 204, 21, 0.35);

  color:
    var(--yellow);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1px;

  margin-bottom: 22px;

}

.hero h1 {

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

  font-size:
    clamp(48px, 6vw, 86px);

  line-height: 0.98;

  font-weight: 900;

  letter-spacing: -3px;

  max-width: 750px;

}

.hero h1 span {

  display: block;

  color:
    var(--yellow);

}

.hero-subtitle {

  font-size: 21px;

  line-height: 1.6;

  color: #e2e8f0;

  margin-top: 30px;

  max-width: 650px;

}

.hero-description {

  font-size: 15px;

  line-height: 1.9;

  color: #94a3b8;

  margin-top: 15px;

  max-width: 650px;

}

.hero-buttons {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 32px;

}

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  padding:
    0 22px;

  border-radius: 14px;

  font-size: 14px;

  font-weight: 800;

  transition:
    var(--transition);

}

.btn-primary {

  background:
    var(--yellow);

  color:
    var(--dark);

  box-shadow:
    0 12px 35px
    rgba(250, 204, 21, 0.2);

}

.btn-primary:hover {

  transform:
    translateY(-4px);

  box-shadow:
    0 20px 45px
    rgba(250, 204, 21, 0.3);

}

.btn-outline {

  border:
    1px solid #64748b;

  color: white;

}

.btn-outline:hover {

  border-color:
    var(--yellow);

  color:
    var(--yellow);

  transform:
    translateY(-4px);

}

.hero-highlights {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 38px;

}

.highlight-card {

  padding:
    13px 18px;

  min-width: 125px;

  border-radius: 16px;

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

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

}

.highlight-card strong {

  display: block;

  color:
    var(--yellow);

  font-size: 24px;

}

.highlight-card span {

  font-size: 10px;

  color: #94a3b8;

}


.hero-image-wrap {

  position: relative;

}

.hero-image-card {

  position: relative;

  border-radius:
    35px;

  overflow: hidden;

  padding: 10px;

  background:
    linear-gradient(
      135deg,
      var(--yellow),
      var(--orange),
      var(--red)
    );

  box-shadow:
    0 40px 90px
    rgba(0,0,0,0.4);

  transform:
    rotate(2deg);

  transition:
    var(--transition);

}

.hero-image-card:hover {

  transform:
    rotate(0deg)
    scale(1.02);

}

.hero-image-card img {

  width: 100%;

  height: 520px;

  object-fit: cover;

  border-radius: 27px;

}

.image-badge {

  position: absolute;

  padding: 11px 16px;

  border-radius: 50px;

  background:
    white;

  color:
    var(--dark);

  font-size: 11px;

  font-weight: 800;

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

}

.badge-top {

  top: 35px;

  left: 30px;

}

.badge-bottom {

  bottom: 30px;

  right: 30px;

}

.floating-product {

  position: absolute;

  width: 65px;
  height: 65px;

  display: grid;

  place-items: center;

  border-radius: 20px;

  background:
    white;

  font-size: 28px;

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

  animation:
    floating 4s ease-in-out infinite;

}

.floating-one {

  top: 30px;
  right: -25px;

}

.floating-two {

  bottom: 100px;
  left: -35px;

  animation-delay:
    1s;

}

.floating-three {

  bottom: 10px;
  right: 50px;

  animation-delay:
    2s;

}

@keyframes floating {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-15px);
  }

}

.hero-bg-shape {

  position: absolute;

  border-radius: 50%;

  filter:
    blur(2px);

  opacity: 0.15;

  animation:
    shapeFloat 8s ease-in-out infinite;

}

.shape-one {

  width: 250px;
  height: 250px;

  background:
    var(--yellow);

  top: 100px;
  left: -120px;

}

.shape-two {

  width: 300px;
  height: 300px;

  background:
    var(--blue);

  right: -150px;
  bottom: 100px;

  animation-delay:
    2s;

}

.shape-three {

  width: 100px;
  height: 100px;

  background:
    var(--red);

  top: 50%;
  left: 50%;

  animation-delay:
    4s;

}

@keyframes shapeFloat {

  0%,
  100% {
    transform:
      translate(0,0);
  }

  50% {
    transform:
      translate(20px,-30px);
  }

}

.hero-wave {

  position: absolute;

  bottom: -1px;

  left: 0;

  width: 100%;

  height: 80px;

  background:
    white;

  clip-path:
    ellipse(65% 55% at 50% 100%);

}


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

.section {

  padding:
    110px 0;

}

.section-heading {

  max-width: 750px;

  margin:
    0 auto 60px;

  text-align: center;

}

.section-label {

  display: inline-block;

  color:
    var(--orange);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 2px;

  margin-bottom: 14px;

}

.section-heading h2 {

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

  font-size:
    clamp(34px, 5vw, 58px);

  line-height: 1.05;

  font-weight: 900;

  letter-spacing: -2px;

}

.section-heading h2 span {

  color:
    var(--blue);

}

.section-heading p {

  color:
    var(--gray);

  margin-top: 18px;

  line-height: 1.8;

}


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

.about-section {

  background:
    #ffffff;

}

.about-grid {

  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: 70px;

  align-items: center;

}

.about-image-frame {

  padding: 10px;

  border-radius: 30px;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--cyan),
      var(--green)
    );

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

}

.about-image-frame img {

  width: 100%;

  height: 520px;

  object-fit: cover;

  border-radius: 23px;

}

.small-label {

  color:
    var(--orange);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 2px;

}

.about-content h3 {

  margin-top: 12px;

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

  font-size:
    clamp(30px, 4vw, 48px);

  line-height: 1.1;

  font-weight: 900;

}

.about-content p {

  margin-top: 20px;

  color:
    var(--gray);

  line-height: 1.9;

}

.check-list {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 13px;

  margin-top: 28px;

}

.check-list div {

  padding: 13px;

  border-radius: 13px;

  background:
    var(--light);

  font-size: 13px;

  font-weight: 700;

}

.check-list span {

  color:
    var(--green);

  margin-right: 8px;

}


/* =========================================================
   OWNER
========================================================= */

.owner-section {

  background:
    #f8fafc;

}

.owner-card {

  display: grid;

  grid-template-columns:
    350px
    1fr;

  gap: 55px;

  padding: 35px;

  border-radius: 30px;

  background:
    white;

  box-shadow:
    var(--shadow);

  align-items: center;

}

.owner-photo img {

  width: 100%;

  height: 390px;

  object-fit: cover;

  border-radius: 22px;

}

.owner-label {

  font-size: 11px;

  font-weight: 900;

  color:
    var(--orange);

  letter-spacing: 2px;

}

.owner-info h3 {

  font-size:
    clamp(30px, 4vw, 50px);

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

  margin-top: 10px;

}

.owner-info p {

  color:
    var(--gray);

  line-height: 1.9;

  margin-top: 18px;

}

.owner-points {

  display: grid;

  gap: 12px;

  margin:
    25px 0;

}

.owner-points div {

  font-size: 14px;

  font-weight: 600;

}

.owner-points strong {

  margin-right: 10px;

}


/* =========================================================
   PRODUCTS
========================================================= */

.products-section {

  background:
    white;

}

.product-filter {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 45px;

}

.filter-btn {

  border: 0;

  background:
    #e2e8f0;

  color:
    var(--dark);

  padding:
    11px 20px;

  border-radius: 50px;

  font-weight: 700;

  cursor: pointer;

  transition:
    var(--transition);

}

.filter-btn:hover,
.filter-btn.active {

  background:
    var(--dark);

  color:
    var(--yellow);

}

.products-grid {

  display: grid;

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

  gap: 22px;

}

.product-card {

  background:
    white;

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

  border-radius:
    22px;

  overflow: hidden;

  transition:
    var(--transition);

  box-shadow:
    0 10px 30px
    rgba(15,23,42,0.05);

}

.product-card:hover {

  transform:
    translateY(-10px);

  box-shadow:
    var(--shadow);

}

.product-card.hide {

  display: none;

}

.product-image {

  position: relative;

  overflow: hidden;

  background:
    #f1f5f9;

}

.product-image img {

  width: 100%;

  height: 240px;

  object-fit: cover;

  transition:
    transform 0.6s ease;

}

.product-card:hover
.product-image img {

  transform:
    scale(1.08);

}

.product-number {

  position: absolute;

  top: 13px;
  right: 13px;

  width: 35px;
  height: 35px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    var(--yellow);

  color:
    var(--dark);

  font-size: 11px;

  font-weight: 900;

}

.product-info {

  padding:
    22px;

}

.product-info > span {

  color:
    var(--orange);

  font-size: 9px;

  letter-spacing: 1.5px;

  font-weight: 900;

}

.product-info h3 {

  margin-top: 6px;

  font-size: 21px;

}

.product-info p {

  margin-top: 8px;

  color:
    var(--gray);

  font-size: 12px;

  line-height: 1.7;

}


/* =========================================================
   BRANDS
========================================================= */

.brands-section {

  padding:
    110px 0;

  background:
    linear-gradient(
      135deg,
      #020617,
      #172554
    );

  color:
    white;

}

.section-heading.light h2 {

  color:
    white;

}

.section-heading.light h2 span {

  color:
    var(--yellow);

}

.section-heading.light p {

  color:
    #94a3b8;

}

.brands-grid {

  display: grid;

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

  gap: 20px;

}

.brand-card {

  min-height: 120px;

  display: grid;

  place-items: center;

  border-radius:
    20px;

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

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

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

  font-size: 19px;

  font-weight: 900;

  letter-spacing: 1px;

  transition:
    var(--transition);

}

.brand-card:hover {

  transform:
    translateY(-8px)
    rotate(-2deg);

  background:
    var(--yellow);

  color:
    var(--dark);

}


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

.why-section {

  background:
    #f8fafc;

}

.why-grid {

  display: grid;

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

  gap: 20px;

}

.why-card {

  padding:
    35px 25px;

  border-radius:
    22px;

  background:
    white;

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

  transition:
    var(--transition);

}

.why-card:hover {

  transform:
    translateY(-8px);

  box-shadow:
    var(--shadow);

}

.why-icon {

  font-size: 42px;

  margin-bottom: 20px;

}

.why-card h3 {

  font-size: 18px;

}

.why-card p {

  color:
    var(--gray);

  font-size: 13px;

  line-height: 1.7;

  margin-top: 10px;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

  background:
    white;

}

.contact-grid {

  display: grid;

  grid-template-columns:
    1fr
    0.75fr;

  gap: 30px;

}

.contact-info {

  display: grid;

  gap: 16px;

}

.contact-card {

  display: flex;

  gap: 18px;

  padding:
    25px;

  border-radius:
    20px;

  background:
    #f8fafc;

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

}

.contact-icon {

  width: 52px;
  height: 52px;

  flex:
    0 0 52px;

  display: grid;

  place-items: center;

  border-radius: 15px;

  background:
    var(--yellow);

  font-size: 22px;

}

.contact-card h3 {

  font-size: 16px;

}

.contact-card p,
.contact-card a {

  display: block;

  color:
    var(--gray);

  font-size: 13px;

  line-height: 1.8;

  margin-top: 4px;

}

.contact-card a:hover {

  color:
    var(--blue);

}

.whatsapp-link {

  color:
    var(--green) !important;

  font-weight: 800;

}

.contact-cta {

  padding:
    45px;

  border-radius:
    25px;

  background:
    linear-gradient(
      145deg,
      var(--yellow),
      var(--orange)
    );

  color:
    var(--dark);

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.cta-icon {

  font-size: 45px;

}

.contact-cta h3 {

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

  font-size:
    clamp(28px, 4vw, 43px);

  line-height: 1.1;

  margin-top: 15px;

}

.contact-cta p {

  margin-top: 15px;

  line-height: 1.8;

  color:
    #334155;

}

.btn-whatsapp {

  margin-top: 12px;

  background:
    #16a34a;

  color:
    white;

}


/* =========================================================
   LOCATION
========================================================= */

.location-section {

  background:
    #f8fafc;

}

.location-grid {

  display: grid;

  grid-template-columns:
    1.4fr
    0.6fr;

  gap: 25px;

}

.map-card {

  overflow: hidden;

  border-radius:
    25px;

  background:
    white;

  box-shadow:
    var(--shadow);

}

.map-card iframe {

  display: block;

}

.location-info {

  padding:
    35px;

  border-radius:
    25px;

  background:
    var(--dark);

  color:
    white;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.location-pin {

  font-size: 50px;

}

.location-info h3 {

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

  font-size: 28px;

  margin-top: 15px;

}

.location-info p {

  color:
    #cbd5e1;

  line-height: 1.9;

  font-size: 13px;

  margin:
    15px 0 25px;

}


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

.final-cta {

  position: relative;

  padding:
    100px 0;

  overflow: hidden;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      #4f46e5
    );

  color:
    white;

}

.final-cta h2 {

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

  font-size:
    clamp(35px, 5vw, 60px);

  font-weight: 900;

}

.final-cta p {

  margin-top: 15px;

  color:
    #dbeafe;

}

.final-cta .hero-buttons {

  justify-content: center;

}

.btn-white {

  background:
    white;

  color:
    var(--dark);

}

.btn-dark {

  background:
    var(--dark);

  color:
    white;

}


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

.footer {

  background:
    #020617;

  color:
    white;

  padding-top:
    75px;

}

.footer-grid {

  display: grid;

  grid-template-columns:
    1.4fr
    0.8fr
    0.8fr
    1fr;

  gap: 45px;

  padding-bottom:
    60px;

}

.footer-brand img {

  width: 65px;
  height: 65px;

  object-fit: contain;

  background:
    white;

  border-radius:
    15px;

}

.footer h3 {

  font-size: 16px;

  margin-bottom:
    17px;

}

.footer-brand h3 {

  margin-top:
    15px;

  font-size:
    21px;

}

.footer p,
.footer a {

  display: block;

  color:
    #94a3b8;

  font-size:
    12px;

  line-height:
    1.9;

}

.footer a:hover {

  color:
    var(--yellow);

}

.footer-bottom {

  padding:
    20px;

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

  display: flex;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;

}

.footer-bottom p {

  margin: 0;

}


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

.top-button {

  position: fixed;

  right: 25px;
  bottom: 25px;

  width: 50px;
  height: 50px;

  border: 0;

  border-radius: 50%;

  background:
    var(--yellow);

  color:
    var(--dark);

  font-size: 22px;

  font-weight: 900;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(20px);

  transition:
    var(--transition);

  z-index: 3000;

  box-shadow:
    0 15px 35px
    rgba(0,0,0,0.2);

}

.top-button.show {

  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {

  opacity: 0;

  transform:
    translateY(35px);

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

}

.reveal.visible {

  opacity: 1;

  transform:
    translateY(0);

}


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

@media (max-width: 1100px) {

  .desktop-nav {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .mobile-nav {

    position: absolute;

    top: 82px;

    left: 0;

    width: 100%;

    background:
      var(--dark);

    display: flex;

    flex-direction: column;

    max-height: 0;

    overflow: hidden;

    transition:
      max-height 0.4s ease;

  }

  .mobile-nav.open {

    max-height: 600px;

  }

  .mobile-nav a {

    padding:
      15px 25px;

    color:
      white;

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

    font-weight: 600;

  }

  .mobile-nav a:hover {

    color:
      var(--yellow);

  }

  .products-grid {

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

  }

  .why-grid {

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

  }

}


@media (max-width: 900px) {

  .hero {

    padding-top:
      130px;

  }

  .hero-grid {

    grid-template-columns:
      1fr;

    gap: 60px;

  }

  .hero-content {

    text-align:
      center;

  }

  .hero-label {

    justify-content:
      center;

  }

  .hero-buttons,
  .hero-highlights {

    justify-content:
      center;

  }

  .hero-image-card {

    max-width:
      700px;

    margin:
      auto;

  }

  .about-grid {

    grid-template-columns:
      1fr;

  }

  .owner-card {

    grid-template-columns:
      1fr;

  }

  .owner-photo {

    max-width:
      450px;

    margin:
      auto;

  }

  .contact-grid,
  .location-grid {

    grid-template-columns:
      1fr;

  }

  .footer-grid {

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

  }

}


@media (max-width: 650px) {

  .container {

    width:
      min(
        100% - 26px,
        1180px
      );

  }

  .nav-container {

    min-height:
      72px;

  }

  .mobile-nav {

    top:
      72px;

  }

  .logo-text span {

    display:
      none;

  }

  .hero {

    min-height:
      auto;

    padding:
      120px 0 70px;

  }

  .hero h1 {

    font-size:
      clamp(42px, 14vw, 65px);

    letter-spacing:
      -2px;

  }

  .hero-subtitle {

    font-size:
      17px;

  }

  .hero-image-card img {

    height:
      350px;

  }

  .floating-product {

    width:
      50px;

    height:
      50px;

    font-size:
      22px;

  }

  .floating-one {
    right: -5px;
  }

  .floating-two {
    left: -5px;
  }

  .section {

    padding:
      80px 0;

  }

  .section-heading {

    margin-bottom:
      40px;

  }

  .check-list {

    grid-template-columns:
      1fr;

  }

  .products-grid {

    grid-template-columns:
      1fr;

  }

  .product-image img {

    height:
      270px;

  }

  .brands-grid {

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

  }

  .brand-card {

    min-height:
      95px;

    font-size:
      14px;

  }

  .why-grid {

    grid-template-columns:
      1fr;

  }

  .owner-card {

    padding:
      20px;

  }

  .owner-photo img {

    height:
      330px;

  }

  .contact-card {

    padding:
      20px;

  }

  .contact-cta {

    padding:
      30px;

  }

  .location-info {

    padding:
      30px;

  }

  .footer-grid {

    grid-template-columns:
      1fr;

  }

  .footer-bottom {

    flex-direction:
      column;

    text-align:
      center;

  }

}


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

  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

  }

}