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

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: "Nunito", sans-serif;
      background: #f5fff9;
      color: #17251d;
      line-height: 1.6;
      overflow-x: hidden;
    }

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

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

    button {
      font-family: inherit;
    }


    /* ========================================================
       VARIABLES
    ======================================================== */

    :root {

      --green: #07883f;
      --dark-green: #045d2d;
      --lime: #b9ed32;
      --yellow: #ffd21c;
      --orange: #ff7a18;
      --red: #ef3d3d;
      --blue: #1687e8;
      --cyan: #00c8d7;
      --purple: #7b3ff2;

      --dark: #102319;
      --text: #26382e;
      --muted: #64756c;

      --white: #ffffff;
      --light: #f5fff9;

      --shadow:
        0 18px 50px rgba(0, 80, 40, 0.12);

      --radius: 24px;
    }


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

    .container {
      width: min(1180px, 92%);
      margin: auto;
    }


    /* ========================================================
       TOP BAR
    ======================================================== */

    .topbar {
      background:
        linear-gradient(
          90deg,
          var(--dark-green),
          var(--green),
          #00a95c
        );

      color: white;
      padding: 9px 0;
      font-size: 14px;
    }

    .topbar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
    }

    .topbar a {
      font-weight: 800;
    }

    .topbar i {
      margin-right: 6px;
      color: var(--yellow);
    }


    /* ========================================================
       NAVBAR
    ======================================================== */

    .navbar {
      position: sticky;
      top: 0;
      z-index: 1000;

      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(16px);

      border-bottom: 1px solid rgba(0,0,0,.06);

      box-shadow: 0 5px 25px rgba(0,0,0,.06);
    }

    .nav-inner {
      min-height: 78px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;

      font-family: "Baloo 2", sans-serif;
      font-size: 25px;
      font-weight: 900;

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

    .logo-icon {
      width: 48px;
      height: 48px;

      border-radius: 15px;

      display: grid;
      place-items: center;

      color: white;
      font-size: 23px;

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

      box-shadow:
        0 8px 20px rgba(0,150,80,.25);

      animation: logoFloat 3s ease-in-out infinite;
    }

    @keyframes logoFloat {
      0%,100% {
        transform: translateY(0) rotate(0);
      }

      50% {
        transform: translateY(-5px) rotate(2deg);
      }
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 5px;
      list-style: none;
    }

    .nav-links a {
      display: block;

      padding: 11px 13px;

      border-radius: 12px;

      font-weight: 800;
      font-size: 14px;

      transition: .3s;
    }

    .nav-links a:hover {
      background: #e9fff2;
      color: var(--green);
      transform: translateY(-2px);
    }

    .menu-btn {
      display: none;

      border: 0;
      background: var(--green);
      color: white;

      width: 45px;
      height: 45px;

      border-radius: 13px;

      font-size: 20px;
      cursor: pointer;
    }


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

    .hero {
      position: relative;
      min-height: 690px;

      display: flex;
      align-items: center;

      overflow: hidden;

      background:
        radial-gradient(
          circle at 85% 15%,
          rgba(185,237,50,.45),
          transparent 28%
        ),
        radial-gradient(
          circle at 10% 80%,
          rgba(0,200,215,.18),
          transparent 30%
        ),
        linear-gradient(
          135deg,
          #effff5,
          #ffffff
        );
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;

      border-radius: 50%;

      filter: blur(1px);

      animation: blobMove 8s ease-in-out infinite alternate;
    }

    .hero::before {
      width: 350px;
      height: 350px;

      background: rgba(185,237,50,.22);

      right: -130px;
      top: -100px;
    }

    .hero::after {
      width: 250px;
      height: 250px;

      background: rgba(0,200,215,.14);

      left: -100px;
      bottom: -90px;

      animation-delay: 2s;
    }

    @keyframes blobMove {
      from {
        transform: translate(0,0) scale(1);
      }

      to {
        transform: translate(30px,20px) scale(1.12);
      }
    }

    .hero-grid {
      position: relative;
      z-index: 2;

      display: grid;
      grid-template-columns: 1.1fr .9fr;

      align-items: center;

      gap: 55px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      padding: 9px 16px;

      border-radius: 50px;

      background: #e5ffed;
      color: var(--dark-green);

      font-size: 14px;
      font-weight: 900;

      border: 1px solid #baf3cd;

      animation: fadeUp .8s both;
    }

    .badge i {
      color: var(--orange);
    }

    .hero h1 {
      margin-top: 18px;

      font-family: "Baloo 2", sans-serif;

      font-size: clamp(42px, 6vw, 76px);

      line-height: .98;

      font-weight: 900;

      color: var(--dark);
    }

    .hero h1 span {
      background:
        linear-gradient(
          90deg,
          var(--green),
          var(--cyan),
          var(--purple)
        );

      -webkit-background-clip: text;
      background-clip: text;

      color: transparent;

      background-size: 250% auto;

      animation: gradientText 4s linear infinite;
    }

    @keyframes gradientText {
      to {
        background-position: 250% center;
      }
    }

    .hero-text {
      margin-top: 20px;

      max-width: 680px;

      color: var(--muted);

      font-size: 18px;
      font-weight: 600;
    }

    .hero-buttons {
      margin-top: 30px;

      display: flex;
      flex-wrap: wrap;
      gap: 13px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;

      min-height: 50px;

      padding: 12px 20px;

      border-radius: 15px;

      font-weight: 900;

      border: 2px solid transparent;

      transition: .3s;

      cursor: pointer;
    }

    .btn:hover {
      transform: translateY(-4px);
    }

    .btn-primary {
      color: white;

      background:
        linear-gradient(
          135deg,
          var(--green),
          #00a85a
        );

      box-shadow:
        0 12px 25px rgba(0,140,70,.22);
    }

    .btn-secondary {
      background: white;

      color: var(--dark-green);

      border-color: #bde8cc;
    }

    .btn-whatsapp {
      background: #20c66b;
      color: white;
    }

    /* HERO VISUAL */

    .hero-visual {
      position: relative;

      min-height: 470px;

      display: grid;
      place-items: center;
    }

    .machine-card {
      position: relative;

      width: min(470px, 100%);

      padding: 25px;

      border-radius: 35px;

      background:
        linear-gradient(
          145deg,
          #ffffff,
          #eafff1
        );

      border: 1px solid #c9f3d7;

      box-shadow:
        0 35px 70px rgba(0,100,50,.16);

      transform: rotate(2deg);

      animation: machineFloat 5s ease-in-out infinite;
    }

    @keyframes machineFloat {
      0%,100% {
        transform: translateY(0) rotate(2deg);
      }

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

    .machine-placeholder {
      min-height: 300px;

      border-radius: 25px;

      display: grid;
      place-items: center;

      background:
        linear-gradient(
          135deg,
          #0a7d3e,
          #12b66a
        );

      color: white;

      text-align: center;

      overflow: hidden;

      position: relative;
    }

    .machine-placeholder::before {
      content: "";

      position: absolute;

      width: 230px;
      height: 230px;

      border-radius: 50%;

      border: 25px solid rgba(255,255,255,.1);

      animation: spin 12s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .machine-placeholder i {
      position: relative;
      z-index: 2;

      font-size: 110px;

      color: var(--yellow);

      filter:
        drop-shadow(0 12px 10px rgba(0,0,0,.2));
    }

    .machine-label {
      margin-top: 17px;

      font-size: 20px;
      font-weight: 900;

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

    .floating-chip {
      position: absolute;

      padding: 12px 15px;

      border-radius: 16px;

      background: white;

      box-shadow: var(--shadow);

      font-weight: 900;

      display: flex;
      align-items: center;
      gap: 9px;

      animation: chipFloat 4s ease-in-out infinite;
    }

    .chip-1 {
      top: -35px;
      right: -15px;
    }

    .chip-2 {
      bottom: -35px;
      left: -25px;

      animation-delay: 1s;
    }

    .chip-3 {
      bottom: 500;
      right: 490px;

      animation-delay: 2s;
    }

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

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


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

    .quick-contact {
      position: relative;
      z-index: 5;

      margin-top: -45px;
    }

    .quick-grid {
      display: grid;

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

      gap: 18px;
    }

    .quick-card {
      background: white;

      padding: 23px;

      border-radius: 20px;

      box-shadow: var(--shadow);

      display: flex;
      align-items: center;
      gap: 15px;

      border: 1px solid #e1f1e6;

      transition: .3s;
    }

    .quick-card:hover {
      transform: translateY(-7px);
    }

    .quick-icon {
      width: 52px;
      height: 52px;

      min-width: 52px;

      display: grid;
      place-items: center;

      border-radius: 15px;

      color: white;

      font-size: 21px;

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

    .quick-card strong {
      display: block;
      color: var(--dark);
    }

    .quick-card span {
      color: var(--muted);
      font-size: 14px;
    }


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

    section {
      padding: 95px 0;
    }

    .section-heading {
      max-width: 750px;
      margin: 0 auto 45px;

      text-align: center;
    }

    .section-tag {
      display: inline-block;

      padding: 7px 14px;

      border-radius: 50px;

      background: #e7fff0;

      color: var(--green);

      font-size: 13px;
      font-weight: 900;

      text-transform: uppercase;

      letter-spacing: 1px;
    }

    .section-heading h2 {
      margin-top: 12px;

      font-family: "Baloo 2", sans-serif;

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

      line-height: 1.05;

      color: var(--dark);
    }

    .section-heading p {
      margin-top: 13px;

      color: var(--muted);

      font-size: 17px;
    }


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

    .about {
      background: white;
    }

    .about-grid {
      display: grid;

      grid-template-columns: .9fr 1.1fr;

      gap: 55px;

      align-items: center;
    }

    .about-image {
      min-height: 450px;

      border-radius: 32px;

      background:
        linear-gradient(
          145deg,
          #07883f,
          #00b7a0
        );

      display: grid;
      place-items: center;

      color: white;

      position: relative;

      overflow: hidden;

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

    .about-image::before {
      content: "";

      position: absolute;

      width: 340px;
      height: 340px;

      border-radius: 50%;

      border: 30px solid rgba(255,255,255,.12);

      animation: spin 15s linear infinite;
    }

    .about-image i {
      position: relative;
      z-index: 2;

      font-size: 130px;

      color: var(--yellow);
    }

    .about-content h3 {
      font-family: "Baloo 2", sans-serif;

      font-size: 36px;

      color: var(--dark);
    }

    .about-content p {
      margin-top: 15px;

      color: var(--muted);

      font-size: 17px;
    }

    .check-list {
      margin-top: 25px;

      display: grid;

      gap: 13px;

      list-style: none;
    }

    .check-list li {
      display: flex;

      align-items: flex-start;

      gap: 11px;

      font-weight: 800;
    }

    .check-list i {
      color: var(--green);

      margin-top: 5px;
    }


    /* ========================================================
       SPARE PARTS
    ======================================================== */

    .parts {
      background:
        linear-gradient(
          180deg,
          #f5fff9,
          #edfff5
        );
    }

    .parts-grid {
      display: grid;

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

      gap: 20px;
    }

    .part-card {
      position: relative;

      padding: 28px 22px;

      background: white;

      border-radius: 24px;

      border: 1px solid #daf0e2;

      box-shadow: 0 12px 35px rgba(0,80,40,.08);

      overflow: hidden;

      transition: .35s;
    }

    .part-card::before {
      content: "";

      position: absolute;

      width: 100px;
      height: 100px;

      border-radius: 50%;

      right: -35px;
      top: -35px;

      background: #dcff75;

      opacity: .45;

      transition: .35s;
    }

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

      box-shadow:
        0 22px 50px rgba(0,80,40,.14);
    }

    .part-card:hover::before {
      transform: scale(1.5);
    }

    .part-icon {
      position: relative;

      width: 65px;
      height: 65px;

      display: grid;
      place-items: center;

      border-radius: 20px;

      color: white;

      font-size: 25px;

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

    .part-card:nth-child(2) .part-icon {
      background:
        linear-gradient(
          135deg,
          var(--orange),
          var(--red)
        );
    }

    .part-card:nth-child(3) .part-icon {
      background:
        linear-gradient(
          135deg,
          var(--purple),
          #c52dff
        );
    }

    .part-card:nth-child(4) .part-icon {
      background:
        linear-gradient(
          135deg,
          #0077c8,
          var(--cyan)
        );
    }

    .part-card h3 {
      margin-top: 18px;

      font-family: "Baloo 2", sans-serif;

      font-size: 25px;

      color: var(--dark);
    }

    .part-card p {
      margin-top: 8px;

      color: var(--muted);

      font-size: 15px;
    }


    /* ========================================================
       VEHICLES
    ======================================================== */

    .vehicles {
      background: white;
    }

    .vehicle-grid {
      display: grid;

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

      gap: 25px;
    }

    .vehicle-card {
      padding: 0;

      overflow: hidden;

      border-radius: 25px;

      background: white;

      border: 1px solid #e3eee7;

      box-shadow: var(--shadow);

      transition: .35s;
    }

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

    .vehicle-image {
      height: 230px;

      display: grid;
      place-items: center;

      background:
        linear-gradient(
          135deg,
          #eaffd9,
          #d8fff5
        );

      color: var(--green);

      font-size: 85px;

      position: relative;

      overflow: hidden;
    }

    .vehicle-image::after {
      content: "";

      position: absolute;

      width: 170px;
      height: 170px;

      border: 20px solid rgba(0,140,70,.08);

      border-radius: 50%;

      animation: spin 10s linear infinite;
    }

    .vehicle-content {
      padding: 23px;
    }

    .vehicle-content h3 {
      font-family: "Baloo 2", sans-serif;

      font-size: 26px;
    }

    .vehicle-content p {
      color: var(--muted);

      margin-top: 7px;
    }


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

    .rubber-track {
      background:
        linear-gradient(
          135deg,
          #061e12,
          #073e26
        );

      color: white;

      overflow: hidden;

      position: relative;
    }

    .rubber-track::before {
      content: "";

      position: absolute;

      width: 500px;
      height: 500px;

      border-radius: 50%;

      background: rgba(185,237,50,.09);

      right: -180px;
      top: -180px;
    }

    .rubber-grid {
      position: relative;
      z-index: 2;

      display: grid;

      grid-template-columns: 1fr 1fr;

      align-items: center;

      gap: 50px;
    }

    .rubber-content .section-tag {
      background: rgba(185,237,50,.12);
      color: var(--lime);
    }

    .rubber-content h2 {
      margin-top: 14px;

      font-family: "Baloo 2", sans-serif;

      font-size: clamp(40px, 5vw, 65px);

      line-height: 1;
    }

    .rubber-content h2 span {
      color: var(--lime);
    }

    .rubber-content p {
      margin-top: 17px;

      color: #c4d8cd;

      font-size: 17px;
    }

    .rubber-points {
      margin-top: 25px;

      display: grid;

      gap: 12px;

      list-style: none;
    }

    .rubber-points li {
      display: flex;

      align-items: center;

      gap: 10px;

      font-weight: 800;
    }

    .rubber-points i {
      color: var(--lime);
    }

    .track-visual {
      min-height: 330px;

      display: grid;
      place-items: center;

      position: relative;
    }

    .track {
      width: 360px;
      height: 200px;

      border-radius: 48%;

      border: 35px solid #1a211d;

      box-shadow:
        inset 0 0 0 5px #39413b,
        0 25px 40px rgba(0,0,0,.35);

      position: relative;

      animation: trackPulse 3s ease-in-out infinite;
    }

    .track::before {
      content: "";

      position: absolute;

      width: 130px;
      height: 130px;

      border-radius: 50%;

      background:
        repeating-conic-gradient(
          #535b55 0deg 8deg,
          #262c28 8deg 16deg
        );

      top: 50%;
      left: 50%;

      transform: translate(-50%,-50%);

      box-shadow:
        0 0 0 12px #1d231f;
    }

    @keyframes trackPulse {
      0%,100% {
        transform: rotate(-5deg) scale(1);
      }

      50% {
        transform: rotate(3deg) scale(1.04);
      }
    }


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

    .owner {
      background: #f7fff9;
    }

    .owner-card {
      display: grid;

      grid-template-columns: .75fr 1.25fr;

      gap: 40px;

      align-items: center;

      background: white;

      padding: 35px;

      border-radius: 32px;

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

    .owner-photo {
      min-height: 350px;

      border-radius: 25px;

      display: grid;
      place-items: center;

      background:
        linear-gradient(
          145deg,
          #0a873f,
          #00b5a2
        );

      color: white;
    }

    .owner-photo i {
      font-size: 120px;
      color: var(--yellow);
    }

    .owner-content h2 {
      font-family: "Baloo 2", sans-serif;

      font-size: 42px;
    }

    .owner-content p {
      margin-top: 12px;

      color: var(--muted);
    }

    .owner-note {
      margin-top: 22px;

      padding: 18px;

      border-left: 5px solid var(--green);

      background: #effff4;

      border-radius: 12px;

      font-weight: 700;
    }


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

    .contact {
      background: white;
    }

    .contact-grid {
      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 25px;
    }

    .contact-card {
      padding: 30px;

      border-radius: 25px;

      background: #f5fff9;

      border: 1px solid #d9eee0;
    }

    .contact-card h3 {
      font-family: "Baloo 2", sans-serif;

      font-size: 30px;
    }

    .contact-list {
      margin-top: 20px;

      display: grid;

      gap: 15px;

      list-style: none;
    }

    .contact-list li {
      display: flex;

      align-items: flex-start;

      gap: 13px;
    }

    .contact-list i {
      color: var(--green);

      width: 25px;

      margin-top: 5px;
    }

    .phone-number {
      font-weight: 900;

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

    .contact-actions {
      margin-top: 25px;

      display: flex;

      flex-wrap: wrap;

      gap: 10px;
    }


    /* ========================================================
       MAP
    ======================================================== */

    .map-wrapper {
      margin-top: 25px;

      min-height: 420px;

      overflow: hidden;

      border-radius: 25px;

      border: 1px solid #d8ece0;

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

    .map-wrapper iframe {
      width: 100%;
      height: 420px;

      border: 0;
    }


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

    .faq {
      background: #f5fff9;
    }

    .faq-container {
      max-width: 850px;
      margin: auto;
    }

    details {
      background: white;

      margin-bottom: 12px;

      border-radius: 15px;

      padding: 18px 20px;

      border: 1px solid #dceee3;
    }

    summary {
      cursor: pointer;

      font-weight: 900;

      color: var(--dark);

      list-style: none;
    }

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

    details p {
      padding-top: 12px;

      color: var(--muted);
    }


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

    footer {
      background:
        linear-gradient(
          135deg,
          #061d11,
          #063b23
        );

      color: white;

      padding: 55px 0 25px;
    }

    .footer-grid {
      display: grid;

      grid-template-columns:
        1.2fr .8fr .8fr;

      gap: 40px;
    }

    footer h3 {
      font-family: "Baloo 2", sans-serif;

      font-size: 25px;
    }

    footer p {
      color: #b8d0c2;

      margin-top: 10px;
    }

    .footer-links {
      margin-top: 13px;

      display: grid;

      gap: 7px;
    }

    .footer-links a {
      color: #d7e9df;

      transition: .25s;
    }

    .footer-links a:hover {
      color: var(--lime);

      transform: translateX(5px);
    }

    .copyright {
      margin-top: 45px;

      padding-top: 20px;

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

      text-align: center;

      color: #9eb8a9;

      font-size: 14px;
    }


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

    .back-top {
      position: fixed;

      right: 20px;
      bottom: 20px;

      width: 48px;
      height: 48px;

      display: grid;
      place-items: center;

      border: 0;

      border-radius: 15px;

      background: var(--green);

      color: white;

      font-size: 18px;

      cursor: pointer;

      opacity: 0;
      visibility: hidden;

      transform: translateY(20px);

      transition: .3s;

      z-index: 999;
    }

    .back-top.show {
      opacity: 1;
      visibility: visible;

      transform: translateY(0);
    }


    /* ========================================================
       SCROLL ANIMATION
    ======================================================== */

    .reveal {
      opacity: 0;

      transform: translateY(35px);

      transition:
        opacity .8s ease,
        transform .8s ease;
    }

    .reveal.active {
      opacity: 1;

      transform: translateY(0);
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }


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

    @media (max-width: 1050px) {

      .nav-links {
        gap: 0;
      }

      .nav-links a {
        padding: 9px 8px;
        font-size: 13px;
      }

      .hero-grid {
        gap: 25px;
      }

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

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

    }


    @media (max-width: 800px) {

      .topbar-inner {
        justify-content: center;

        flex-direction: column;

        gap: 3px;
      }

      .menu-btn {
        display: grid;
        place-items: center;
      }

      .nav-links {
        position: absolute;

        left: 4%;

        right: 4%;

        top: 82px;

        background: white;

        padding: 12px;

        border-radius: 18px;

        box-shadow: 0 20px 40px rgba(0,0,0,.12);

        display: none;

        flex-direction: column;

        align-items: stretch;
      }

      .nav-links.open {
        display: flex;
      }

      .nav-links a {
        padding: 13px;
      }

      .hero {
        min-height: auto;

        padding: 90px 0 100px;
      }

      .hero-grid {
        grid-template-columns: 1fr;

        text-align: center;
      }

      .hero-buttons {
        justify-content: center;
      }

      .hero-text {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-visual {
        min-height: 400px;
      }

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

      .about-grid,
      .rubber-grid,
      .owner-card,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .about-image {
        min-height: 350px;
      }

      .rubber-content {
        text-align: center;
      }

      .rubber-points {
        text-align: left;
      }

      .track-visual {
        min-height: 300px;
      }

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

    }


    @media (max-width: 560px) {

      section {
        padding: 70px 0;
      }

      .container {
        width: min(92%, 1180px);
      }

      .logo {
        font-size: 20px;
      }

      .logo-icon {
        width: 42px;
        height: 42px;
      }

      .hero h1 {
        font-size: 45px;

        letter-spacing: -1px;
      }

      .hero-text {
        font-size: 16px;
      }

      .machine-card {
        padding: 15px;
      }

      .machine-placeholder {
        min-height: 240px;
      }

      .machine-placeholder i {
        font-size: 80px;
      }

      .floating-chip {
        font-size: 12px;

        padding: 9px 11px;
      }

      .chip-1 {
        right: -5px;
      }

      .chip-2 {
        left: -5px;
      }

      .chip-3 {
        right: 5px;
      }

      .parts-grid,
      .vehicle-grid {
        grid-template-columns: 1fr;
      }

      .owner-card {
        padding: 20px;
      }

      .owner-photo {
        min-height: 280px;
      }

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

      .track {
        width: 280px;
        height: 155px;

        border-width: 28px;
      }

      .track::before {
        width: 100px;
        height: 100px;
      }

      .btn {
        width: 100%;
      }

      .hero-buttons {
        width: 100%;
      }

    }