:root{
    --blue:#0F2A43;
    --orange:#F28C28;
    --white:#FFFFFF;
  }

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

  .hero-section{
    position:relative;

    min-height:620px;

    overflow:hidden;

    background-image:url('/assets/images/garage-bg.webp');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  }

  /* OVERLAY */

  .hero-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
      90deg,
      rgba(5,14,26,.92) 0%,
      rgba(5,14,26,.80) 32%,
      rgba(5,14,26,.45) 58%,
      rgba(5,14,26,.18) 100%
    );

    z-index:1;
  }

  /* CONTAINER */

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

    min-height:620px;

    padding:115px 70px 38px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

  /* =========================================
     CONTENT
  ========================================= */

  .hero-content{
    max-width:500px;
  }

  .hero-title{
    color:white;

    font-size:44px;
    line-height:1.15;
    letter-spacing:-1px;
    font-weight:700;

    margin-bottom:18px;

    font-family:'Open Sans', sans-serif;
  }

  .hero-title span{
    color:var(--orange);
  }

  .hero-text{
    color:rgba(255,255,255,.92);

    font-size:16px;
    line-height:1.7;

    max-width:480px;

    margin-bottom:28px;

    font-family:'Open Sans', sans-serif;
  }

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

  .hero-buttons{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }

  .btn-orange,
  .btn-outline-custom{
    height:50px;

    padding:0 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:5px;

    font-size:13px;

    font-family:'Open Sans', sans-serif;

    text-decoration:none;
  }

  .btn-orange{
    gap:10px;

    background:var(--orange);
    color:white;

    font-weight:600;

    box-shadow:0 10px 20px rgba(242,140,40,.18);

    transition:.25s ease;
  }

  .btn-orange:hover{
    background:#ea7e1d;
    color:white;
    transform:translateY(-1px);
  }

  .btn-outline-custom{
    border:1px solid rgba(255,255,255,.45);

    color:white;

    font-weight:500;

    backdrop-filter:blur(4px);

    transition:.25s ease;
  }

  .btn-outline-custom:hover{
    background:white;
    color:var(--blue);
  }

  /* =========================================
     FEATURES
  ========================================= */

  .hero-features{
    display:grid;

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

    gap:24px;

    padding-top:24px;

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

  .feature-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
  }

  .feature-icon{
    width:36px;
    height:36px;

    border-radius:50%;

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

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

    color:white;

    font-size:14px;

    flex-shrink:0;
  }

  .feature-item h4{
    color:white;

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

    margin-bottom:4px;

    font-family:'Open Sans', sans-serif;
  }

  .feature-item p{
    color:rgba(255,255,255,.72);

    font-size:11px;
    line-height:1.5;

    margin:0;

    font-family:'Open Sans', sans-serif;
  }

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

  @media(max-width:1200px){

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

  }

  @media(max-width:991px){

    .hero-container{
      min-height:auto;

      padding:100px 25px 40px;

      gap:70px;
    }

    .hero-title{
      font-size:36px;
    }

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

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

  }

  @media(max-width:576px){

    .hero-title{
      font-size:31px;
    }

    .hero-buttons{
      flex-direction:column;
      align-items:stretch;
    }

    .btn-orange,
    .btn-outline-custom{
      width:100%;
    }

  }