/*---------------------Roots-----------------*/

   :root {
       ---green: #1BB46D;
       ---white: #ffffff;
       ---black: #1F1F5F;
       ---border: #e5e5e5;
       ---paragraph: #919191;
   }

   /*---------------------Roots-----------------*/
   .sliderlogo {
       overflow: hidden;
   }

   .sliderlogo .heading {
       display: flex;
       justify-content: space-between;
   }

   .sliderlogo .heading h1 {
       color: var(---black);
       font-family: "Bebas Neue", sans-serif;
       font-size: 90px;
       line-height: 90px;
   }

   .sliderlogo .heading p {
       color: var(---paragraph);
       font-size: 20px;
       width: 555px;
       line-height: 40px;
   }

   .sliderlogo .slider {
       margin-top: 50px;
   }

   .slide-track {
       display: flex;
       width: calc(250px * 12);
       animation: scroll 20s linear infinite;
   }

   .slide {
       width: 250px;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 10px;
   }

   .slide img {
       max-width: 100%;
       height: auto;
       object-fit: contain;
   }

   @keyframes scroll {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(calc(-250px * 6));
       }
   }

   /* Responsive */
   @media (max-width: 1366px) {
       .sliderlogo .heading h1 {
           font-size: 70px;
           line-height: 70px;
       }
   }

   @media (max-width: 1100px) {
       .sliderlogo .heading h1 {
           font-size: 50px;
           line-height: 50px;
       }

       .sliderlogo .heading p {
           font-size: 16px;
           width: 500px;
           line-height: 40px;
       }
   }

   @media (max-width: 930px) {
       .sliderlogo .heading {
           display: block;
       }

       .sliderlogo .heading h1 {
           font-size: 90px;
           line-height: 90px;
       }
   }

   @media (max-width: 770px) {
       .sliderlogo .heading h1 {
           font-size: 70px;
           line-height: 70px;
       }
   }

   @media (max-width: 690px) {
       .sliderlogo .heading h1 {
           font-size: 60px;
           line-height: 60px;
       }
   }

   @media (max-width: 768px) {
       .slide {
           width: 180px;
       }

       .slide-track {
           width: calc(180px * 12);
       }

       @keyframes scroll {
           100% {
               transform: translateX(calc(-180px * 6));
           }
       }
   }

   @media (max-width: 480px) {
           .sliderlogo .heading p {
           font-size: 12px;
           width: 100%;
           line-height: 30px;
           margin-top: 20px;
       }
       .slide {
           width: 140px;
       }

       .slide-track {
           width: calc(140px * 12);
       }

       @keyframes scroll {
           100% {
               transform: translateX(calc(-140px * 6));
           }
       }
   }

   @media (max-width: 460px) {
       .sliderlogo .heading h1 {
           font-size: 40px;
           line-height: 40px;
       }
   }