/*PURE CSS SLIDE START *
  #slide-layout {
    width: 100%;
    overflow: hidden;
    clear: both;
}
  #cssslide-01 {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation: 20s purecss-slider infinite;
  }
  #cssslide-01 figure {
    margin: 0px;
    padding: 0px;
  }
  #cssslide-01 figure img {
    width: 20%;
    float: left;
  }
  
  @keyframes purecss-slider {
    0% {
      left: 0;
    }
    20% {
      left: 0;
    }
    25% {
      left: -100%;
    }
    45% {
      left: -100%;
    }
    50% {
      left: -200%;
    }
    70% {
      left: -200%;
    }
    75% {
      left: -300%;
    }
    95% {
      left: -300%;
    }
    100% {
      left: -400%;
    }
  }
  
/*PURE CSS SLIDE END*/










/*BUTTONS CSS CODE START //////////////////// */
/* https://www.codehim.com/demo/candy-color-button-animation/ */

.button-center {
    text-align: center;
    width: 100%;
    clear: both;
  }
  
  .button {
      width:fit-content;
      height: 45px;
      color: #fff;
      border-radius: 5px;
      padding: 12px 32px;
      font-family: lato,sans-serif;
      font-size: 18px;
      font-weight: 500;
      background: 0 0;
      cursor: pointer;
      transition: all .3s ease;
      position: relative;
      display: inline-block;
      box-shadow: inset 2px 2px 2px 0 rgb(255 255 255 / 50%), 7px 7px 20px 0 rgb(0 0 0 / 10%), 4px 4px 5px 0 rgb(0 0 0 / 10%);
      outline: none;
      margin: 10px 0px;
  }
  .custom-btn  {
    width:fit-content;
    height: 45px;
    color: #fff;
    border-radius: 5px;
    padding: 12px 32px;
    font-family: lato,sans-serif;
    font-size: 18px;
    font-weight: 500;
    background: 0 0;
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0 rgb(255 255 255 / 50%), 7px 7px 20px 0 rgb(0 0 0 / 10%), 4px 4px 5px 0 rgb(0 0 0 / 10%);
    outline: none;
    margin: 10px 0px;
  }
  .btn-1 {
    background:#060e83;
    background:linear-gradient(0deg,rgba(6,14,131,1) 0%,rgba(12,25,180,1) 100%);
    border:none
  }
  .btn-1:hover{
    background:#0003ff;
    background:linear-gradient(0deg,rgba(0,3,255,1) 0%,rgba(2,126,251,1) 100%)
  }
  
  
  .btn-2{
    background:#6009f0;background:linear-gradient(0deg,rgba(96,9,240,1) 0%,rgba(129,5,240,1) 100%);
    border:none
  }
  .btn-2:before{height:0%;width:2px}
  .btn-2:hover{box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.5),inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0,0,0,.4)}
  
  .btn-3{background:#00acee;background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);width:130px;height:40px;line-height:42px;padding:0;border:none}
  .btn-3 span{position:relative;display:block;width:100%;height:100%}
  .btn-3:before,.btn-3:after{position:absolute;content:"";right:0;top:0;background:#027efb;transition:all .3s ease}
  .btn-3:before{height:0%;width:2px}
  .btn-3:after{width:0%;height:2px}
  .btn-3:hover{background:0 0;box-shadow:none}
  .btn-3:hover:before{height:100%}
  .btn-3:hover:after{width:100%}
  .btn-3 span:hover{color:#027efb}
  .btn-3 span:before,
  .btn-3 span:after{position:absolute;content:"";left:0;bottom:0;background:#027efb;transition:all .3s ease}
  .btn-3 span:before{width:2px;height:0%}
  .btn-3 span:after{width:0%;height:2px}
  .btn-3 span:hover:before{height:100%}
  .btn-3 span:hover:after{width:100%;}
  .btn-3:hover { color: #060e83; }
  .btn-5{width:130px;height:40px;line-height:42px;padding:0;border:none;background:#ff1b00;background:linear-gradient(0deg,rgba(255,27,0,1) 0%,rgba(251,75,2,1) 100%)}
  .btn-5:hover{color:#f0094a;background:0 0;box-shadow:none}
  .btn-5:before,.btn-5:after{content:'';position:absolute;top:0;right:0;height:2px;width:0;background:#f0094a;box-shadow:-1px -1px 5px 0 #fff,7px 7px 20px 0 #0003,4px 4px 5px 0 #0002;transition:400ms ease all}.btn-5:after{right:inherit;top:inherit;left:0;bottom:0}
  .btn-5:hover:before,
  .btn-5:hover:after{width:100%;transition:800ms ease all}
  
   
  
  .btn-9{border:none;transition:all .3s ease;overflow:hidden}
  .btn-9:after{position:absolute;content:" ";z-index:-1;top:0;left:0;width:100%;height:100%;background-color:#1fd1f9;background-image:linear-gradient(315deg,#1fd1f9 0%,#b621fe 74%);transition:all .3s ease}
  .btn-9:hover{background:0 0;box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3);color:#fff}
  .btn-9:hover:after{-webkit-transform:scale(2) rotate(180deg);transform:scale(2) rotate(180deg);box-shadow:4px 4px 6px 0 rgba(255,255,255,.5),-4px -4px 6px 0 rgba(116,125,136,.2),inset -4px -4px 6px 0 rgba(255,255,255,.5),inset 4px 4px 6px 0 rgba(116,125,136,.3)}
  
  .btn-10{background:#1609f0;background:linear-gradient(0deg,rgba(22,9,240,1) 0%,rgba(49,110,244,1) 100%);color:#fff;border:none;transition:all .3s ease;overflow:hidden}.btn-10:after{position:absolute;content:" ";top:0;left:0;z-index:-1;width:100%;height:100%;transition:all .3s ease;-webkit-transform:scale(.1);transform:scale(.1)}
  .btn-10:hover{color:#fff;border:none;background:0 0}
  .btn-10:hover:after{background:#0003ff;background:linear-gradient(0deg,rgba(2,126,251,1) 0%,rgba(0,3,255,1)100%);-webkit-transform:scale(1);transform:scale(1)}
   
  
  .btn-12{position:relative;right:20px;bottom:20px;border:none;box-shadow:none;width:130px;height:40px;line-height:42px;-webkit-perspective:230px;perspective:230px}.btn-12 span{background:#00acee;background:linear-gradient(0deg,rgba(0,172,238,1) 0%,rgba(2,126,251,1) 100%);display:block;position:absolute;width:130px;height:40px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);border-radius:5px;margin:0;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .3s;transition:all .3s}.btn-12 span:nth-child(1){box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;-webkit-transform:rotateX(90deg);-moz-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.btn-12 span:nth-child(2){-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:50% 50% -20px;-moz-transform-origin:50% 50% -20px;transform-origin:50% 50% -20px}.btn-12:hover span:nth-child(1){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);-webkit-transform:rotateX(0deg);-moz-transform:rotateX(0deg);transform:rotateX(0deg)}.btn-12:hover span:nth-child(2){box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);color:transparent;-webkit-transform:rotateX(-90deg);-moz-transform:rotateX(-90deg);transform:rotateX(-90deg)}
  
  .btn-13{background-color:#89d8d3;background-image:linear-gradient(315deg,#89d8d3 0%,#03c8a8 74%);border:none;z-index:1}
  .btn-13:after{position:absolute;content:"";width:100%;height:0;bottom:0;left:0;z-index:-1;border-radius:5px;background-color:#4dccc6;background-image:linear-gradient(315deg,#4dccc6 0%,#96e4df 74%);box-shadow:-7px -7px 20px 0 #fff9,-4px -4px 5px 0 #fff9,7px 7px 20px 0 #0002,4px 4px 5px 0 #0001;transition:all .3s ease}.btn-13:hover{color:#fff}.btn-13:hover:after{top:0;height:100%}.btn-13:active{top:2px}
  
   
  
  .btn-15{background:#b621fe;border:none;z-index:1}.btn-15:after{position:absolute;content:"";width:0;height:100%;top:0;right:0;z-index:-1;background-color:#663dff;border-radius:5px;box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),7px 7px 20px 0 rgba(0,0,0,.1),4px 4px 5px 0 rgba(0,0,0,.1);transition:all .3s ease}.btn-15:hover{color:#fff}.btn-15:hover:after{left:0;width:100%}.btn-15:active{top:2px}
  
   
  /*BUTTONS CSS CODE END //////////////////// */


  




/* LOGOS SLIDES START */

.logos-slide {
    width: 100%;
    clear: both;
    background-color: #fff;
    padding: 0px 8%;
  }
  .logos-slide .logos-slide-in {
  
    margin: 0px auto;
  }
  .logos-slide .logos-slide-in .slider {
    height:250px;
    margin:auto;
    position:relative;
    width:100%;
    display:grid;
    place-items:center;
    overflow:hidden;
  }
  
  
  .logos-slide .logos-slide-in .slide-tract {
  display:flex;
  width: calc(250px * 18);
  animation: scroll 60s linear infinite;
  
  }
  .logos-slide .logos-slide-in .slide-tract:hover {
    animation-play-state:paused;
  }
  
  @keyframes scroll {
    0% {
        transform: translateX(0);
    }
  
    100% {
        transform: translateX(calc(-250px * 9));
        -webkit-transform: translateX(calc(-250px * 9));
        -moz-transform: translateX(-250px * 9);
        transform: translateX(-250px * 9);
    }
  }
  
  .logos-slide .logos-slide-in .slide {
    height: 200px;
    width:250px;
    display:flex;
    align-items:center;
    padding:15px;
    perspective: 100px;
  }
  
  .logos-slide .logos-slide-in img {
    width: 100%; 
    transition: transform 1s;
  
  }
  .logos-slide .logos-slide-in img:hover {
    transform: translateZ(20px);
    
  }
  
  .logos-slide .logos-slide-in .slider::before,
  .slider::after {
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    content: '';
    height:100%;
    position:absolute;
    width:15%;
    z-index:2;
  }
  .logos-slide .logos-slide-in .slider::before {
    left:0;
    top:0;
  }
  .logos-slide .logos-slide-in .slider::after {
    right:0;
    top:0;
    transform: rotateZ(180deg);
  }
  
  /*LOGOS SLIDES END*/