#industryGrade {margin: 0 0 -110px 0; padding: 60px 0 120px 0; background: #fff;}
#industryGrade h3 {font-weight: 800; font-size: 51px; line-height: 70px; text-align: center; /* color: #3206B4; */ max-width: 700px; margin: 0 auto; /* background: linear-gradient(270deg, purple, #03c2c2, #43089a); background-size: 1000% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: industryGradeGradientText 6s linear infinite; */ animation: headingText 6s ease-in-out infinite;}
#industryGrade .infiniteCarouselWrapper {padding: 0 40px;}
#industryGrade .infiniteCarouselWrapper .slider ul li {background: none; border-radius: 0; width: 240px; display: flex !important; align-items: center; flex-wrap: wrap; justify-content: center;}
#industryGrade .infiniteCarouselWrapper .slider::before {background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);}
#industryGrade .infiniteCarouselWrapper .slider::after {background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);}
#industryGrade .infiniteCarouselWrapper .slider ul li img {/* filter: grayscale(1); opacity: 0.4; */ max-width: 180px; transition: all ease-in-out 0.2s;}
#industryGrade .infiniteCarouselWrapper .slider ul li:hover img {filter: grayscale(0); opacity: 1;}

@keyframes industryGradeGradientText {
	0% {background-position: 0% 50%;}
	100% {background-position: 100% 50%;}
}

@keyframes headingText {
	0% {color: blue;}
	25% {color: purple;}
	50% {color: #0bc3c3;}
	75% {color: purple;}
	100% {color: blue;}
}

/**** media queries ****/
@media only screen and (min-width: 0px) and (max-width: 575px) {
    #industryGrade {padding: 100px 0 140px 0;}
    #industryGrade h3 {font-size: 36px; line-height: 50px;}
    #industryGrade .infiniteCarouselWrapper {padding: 0;}
    .infiniteCarouselWrapper .slider::before, .infiniteCarouselWrapper .slider::after {width: 80px;}
    #industryGrade .infiniteCarouselWrapper .slider ul li img {width: 140px;}
}

@media only screen and (min-width: 576px) and (max-width: 991px) {
    #industryGrade h3 {font-size: 40px; line-height: 50px;}
    #industryGrade .infiniteCarouselWrapper {padding: 0;}
    .infiniteCarouselWrapper .slider::before, .infiniteCarouselWrapper .slider::after {width: 80px;}
    #industryGrade .infiniteCarouselWrapper .slider ul li img {width: 120px;}
    #industryGrade .infiniteCarouselWrapper .slider ul li {width: auto;}
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
    #industryGrade h3 {font-size: 40px; line-height: 54px;}
    .infiniteCarouselWrapper .slider::before, .infiniteCarouselWrapper .slider::after {width: 80px;}
    #industryGrade .infiniteCarouselWrapper .slider ul li img {width: 120px;}
    #industryGrade .infiniteCarouselWrapper .slider ul li {width: auto;}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #industryGrade {padding: 60px 0 120px 0;}
    #industryGrade h3 {font-size: 32px; line-height: 42px; max-width: 500px;}
    #industryGrade .infiniteCarouselWrapper .slider ul li img {width: 140px;}
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    #industryGrade h3 {font-size: 40px; line-height: 50px;}
    #industryGrade .infiniteCarouselWrapper .slider ul li {width: 200px;}
    #industryGrade .infiniteCarouselWrapper .slider ul li img {max-width: 140px;}
}