*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
body {
   background-color: black;
   color: #fff;
   font-size: 16px;
   overflow: hidden;
  
  
   
}
header  {
   position: fixed;
   left: 50%;
   width: 90vw;
   transform: translateX(-50%);
   display: grid;
   grid-template-columns: 1fr 600px;
   align-items: center;
   gap: 100px;
   z-index: 2;
& img{

   width: 200px; 
   z-index: 2;
}
 & nav{
   & ul {
      gap: 10px;
      display: grid;
      grid-template-columns:repeat(3, 200px) ;
   }
 }   
}

section{
   background-image: radial-gradient(#7f3d9e, #48018f);
   height: 100vh;
   position: relative;

   & .list{
     width: 70vw; 
     margin: auto;
     height: 100%;
     position: relative;

     & .item{
        position: absolute;
        inset: 0;
        & .car-img {
           position: absolute;
           top: 50%;
          width: 70%;
          transform: translateY(-50%);
          & img{
            width: 100%;
            transform: rotate(-15deg);
          }
          &::before{
            content: '';
            position: absolute;
            background-color:#0000009c ;
            width: 100%;
            height: 100% ;
            top: 150%;
            left:50px ;
            border-radius: 50%;
            filter: blur(50px);
          }
        }
        & .content{ 
             position: absolute;
             right: 0;
             top: 0;
             width: 40%;
             height: 100%;
             justify-content: end;
             align-items: end;
            
             display: flex;
             flex-direction: column;
             gap: 20px;
             & .descr{
               font-size: 20px;
               font-weight: bold;
               text-transform: uppercase;
               color: #fff;
             }
             & p{
               color: #c8c4c4;
               font-size: 12px;
               text-align: right;
              max-width: 400px;
             }
             & h2 {
               
               text-align: right;
               font-size: 5em;
               line-height: 1em;
             
             }
             
             }
             & .desc01 {
               color: #c8c4c4;
               font-size: 12px;
               text-align: right;
              max-width: 400px; 
             }
             & .btn {
               border-radius: 15px;
               height: 50px;
               width: 120px;
               text-transform: uppercase;
               background-color: springgreen;
               color: #fff;
               border: 2px solid #48018f;
               padding: 10px 20px;
               font-size: 10px;
               font-weight: bold;
               cursor: pointer;
               align-self: flex-end;
            }
            
        }
    &::before{
      content: '';
      position: absolute;
      height: 200px;
      width: 100%;
      top: 50%;
      border-top: 1px solid #fff;
    }    
     }
   }


   .arrow {

      width: 70vw; 
      position: absolute;
      top: 40%;
      left: 50%;
    
      
      transform: translate(-50%,-25%);
      display: flex;
      justify-content: space-between;

 & button:nth-child(1) {
   & img {
      transform: scalex(-1);
   }
}
 }
& button {
top: 60%;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
cursor: pointer;

   & img {
      width: 20px;
    margin-top: 4px;
    cursor: pointer;
   }
   &:hover {
      background-color: #5cb36c;
   }
}


.indicator{
   position: absolute;
   top: 50%;
   left: 50%;
   height: 200px;
   width:90vw ;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 15px;

  & .numbr {
   font-size: 5em;
  }
   & ul {
      display: flex;
      gap: 15px;
      & li {
         width: 50px;
         height: 5px;
         border-radius: 50%;
         background-color: #5cb36c;
         border-radius: 5px;
         cursor: pointer;
         transition: 0.5s;
      }
      & .active {
        
         background-color: #fff;
      }
   }
}  

 section{
& .list{

   --calculation:1;

    & .item{
      transform: translateX(calc(var(--calculation) * 100vw));
      transition: 0.5s;
      opacity: 0;


      & .car-img{

    & img{
transform: rotate(0);
transition: 0.5s;
transition-delay: 0.3s;


    }
      }
      & .content{
 & .descr,h2,.desc01,.btn{
   transform: translateX(calc(var(--calculation) * 200px));
   transition: 0.7s;
   transition-delay: 0.3s;
   opacity: 0;
  
 }
 & h2{
   transition-delay: 0.5s;
 }
 & .descr{
   transition-delay:0.7s ;
 }
 & .desc01{
   transition-delay: 0.9s;
 }
    }
}
 & .active{
  --calculation: 0;
  transform: translateX(calc(var(--calculation) * 100vw));
      transition: 0.5s;
      opacity: 1;

      
      & .car-img{

    & img{
transform: rotate(-20deg);




    }
      }
          & .content{
 & .descr,h2,.desc01,.btn{
   transform: translateX(0);
 opacity: 1;
  
  
 }

 }


 }
} 
  
 }

@media (max-width: 768px){

header{
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
    justify-items: center;
}

header img{
    width: 140px;
}

header nav ul{
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

section .list{
    width: 90vw;
}

section .list .item .car-img{
    width: 100%;
    top: 30%;
}

section .list .item .car-img img{
    width: 100%;
}

section .list .item .content{
    width: 100%;
    top: 55%;
    padding: 20px;
    align-items: center;
    text-align: center;
}

section .list .item .content p{
    text-align: center;
}

section .list .item .content h2{
    font-size: 3em;
    text-align: center;
}

section .list .item .content .btn{
    align-self: center;
}

.arrow{
    width: 90vw;
    top: 85%;
}

.indicator{
    align-items: center;
}

.indicator .numbr{
    font-size: 3em;
}
}
section .list .item .content{
    width: 100%;
    padding: 20px;
    top: 50%;
    align-items: center;
    justify-content: center;
    text-align: center;
}

section .list .item .content .descr{
    font-size: 16px;
    text-align: center;
}

section .list .item .content h2{
    font-size: 2.5em;
    text-align: center;
    line-height: 1.1em;
}

section .list .item .content .desc01{
    font-size: 14px;
    max-width: 90%;
    text-align: center;
    line-height: 1.5em;
}

section .list .item .content .btn{
    align-self: center;
    width: 140px;
    height: 45px;
    font-size: 12px;
}