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

    .hero{
      position:relative;
      height:520px;
      overflow:hidden;
    }

    .hero img{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .hero::before{
      content:'';
      position:absolute;
      inset:0;
      background:rgba(0,0,0,.35);
    }

    .hero__content{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:2;
    }

    /* =========================
       TIMELINE
    ========================== */

    .timeline{
      padding:90px 0 50px;
      background:#fafafa;
    }

    .timeline__wrapper{
      position:relative;
      max-width:1100px;
      margin:0 auto;
      min-height:850px;
    }

    .road{
      position:absolute;
      left:50%;
      top:0;
      transform:translateX(-50%);
      width:460px;
      opacity:.95;
      z-index:1;
    }

    .timeline-item{
      position:absolute;
      max-width:330px;
      z-index:2;
    }

    .timeline-item h3{
      font-size:20px;
      margin-bottom:4px;
      position:relative;
      display:inline-block;
    }
    .timeline-item .h-line {

        width: 100%;
        height: 1px;
        background: var(--akcent-color);
    }
    .timeline-item h3::after{
      content:'';
      position:absolute;
      right:-18px;
      top:12px;
      width:18px;
      height:4px;
      background:var(--akcent-color);
      transform:rotate(-67deg);
    }

    .timeline-item p{
      font-size:15px;
      color:#555;
      max-width: 290px;
    }

    /* .timeline-item::before{
      content:'';
      position:absolute;
      width:180px;
      height:2px;
      background:#1aa34a;
      top:24px;
    } */

    .left{
      text-align:left;
    }

    .left::before{
      right:-210px;
    }

    .right::before{
      left:-210px;
    }

    .item-1{
      top:20px;
      left:0;
    }

    .item-2{
      top:110px;
      right:0;
    }

    .item-3{
      top:270px;
      left:0;
      text-align: right;
    }

    .item-4{
      top:440px;
      right:0;
    }

    .item-5{
      top:520px;
      left:150px;
      text-align: right;
    }

    .item-5::before{
      width:130px;
      left:100%;
      margin-left:20px;
    }

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

    .brands{
      padding:50px 0 90px;
      background:#fafafa;
    }

    .section-title{
      text-align:center;
      font-size:54px;
      font-weight:600;
      margin-bottom:50px;
    }

    .brands-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:24px;
    }

    .brand-card{
      background:#fff;
      border:1px solid #ddd;
      height:150px;
      display:flex;
      align-items:center;
      justify-content:center;
      transition:.3s;
      padding:20px;
    }

    .brand-card:hover{
      transform:translateY(-4px);
      box-shadow:0 10px 30px rgba(0,0,0,.08);
    }

    .brand-card img{
      max-height:70px;
      object-fit:contain;
    }



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

    @media(max-width:1100px){

      .nav{
        gap:18px;
      }

      .hero h1{
        font-size:52px;
      }

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

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

      .timeline__wrapper{
        min-height:auto;
        display:flex;
        flex-direction:column;
        gap:50px;
      }

      .road{
        display:none;
      }

      .timeline-item{
        position:relative;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        max-width:100%;
        text-align:left;
        padding-left:40px;
      }

      .timeline-item::before{
        left:0;
        width:20px;
      }

      .left::before,
      .right::before{
        left:0;
        right:auto;
      }
    }

    @media(max-width:900px){

      .hero{
        height:420px;
      }

      .hero h1{
        font-size:42px;
      }
    }

    @media(max-width:768px){

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

      .section-title{
        font-size:40px;
      }

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

      .hero{
        height:340px;
      }

      .hero h1{
        font-size:34px;
      }

      .logo{
        font-size:22px;
      }
    }

    @media(max-width:480px){


      .hero h1{
        font-size:28px;
        padding:0 20px;
      }

      .section-title{
        font-size:30px;
      }

      .timeline-item h3{
        font-size:26px;
      }

      .timeline-item p{
        font-size:14px;
      }

      .header__inner{
        height:74px;
      }
    }