@import "icofont.min.css"; 
body{margin: 0;padding: 0;font-family: 'Roboto',sans-serif;}
a,a:hover,a:focus{outline: none;text-decoration: none;transition: all 500ms ease;}
.button{display: inline-block;padding: 12px 40px;background: #2579FF;font-size: 14px;color: #fff;border-radius: 30px;margin-bottom: 15px;}
.button:hover,.button:focus{color: #fff;background: #0c52c3;transition: all 500ms ease;}
header{position: absolute;top: 0;left: 0;z-index: 11;width: 100%;height: auto;padding: 15px 0;}
header .button{margin-top: 20px;}
.menu{background: #fff;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06);border-radius: 20px;padding: 15px;display: flex;align-items: center;justify-content: center;list-style: none;column-gap: 20px;}
.menu li a{font-style: normal;font-weight: 500;font-size: 16px;color: #bdbdbd;position: relative;padding-left: 34px;padding-top: 5px;}
.menu li a .icon{position: absolute;left: 0;top: 0;width: 24px;height: 24px;}
.menu li a .icon img{width: 100%;height: auto;}
.menu li a:hover,.menu li a.active{color: #2579ff;}
.menu li a:hover img,.menu li a.active img{filter: invert(39%) sepia(60%) saturate(3794%) hue-rotate(206deg) brightness(101%) contrast(101%);}
.menu li:last-child a{padding-left: 50px;display: block;}
.menu li:last-child  a .icon{width: 40px;height: 40px;top: 5px;}
.menu li:last-child a:hover img,.menu li:last-child a.active img{filter: inherit;} 
.words-table{width:100%;}
.words-table th, .words-table td {width:25%;}
.rainbow-5:hover{
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
   animation:slidebg 5s linear infinite;
}
@keyframes slidebg {
  to {
    background-position:20vw;
  }
}
.search{background: #a2b904 url("../images/search_shape.png") no-repeat 70% bottom;padding: 120px 0 30px;position: relative;}
.search .shape-left{position: absolute;left: 0;bottom: -10px;width: 320px;height: auto;z-index: 1;}
.search .shape-right{position: absolute;right: 0;bottom: -10px;width: 320px;height: auto;z-index: 1;}
.search .shape-bottom{position: absolute;left: 40px;bottom: -45px;width: 125px;height: auto;z-index: 1;}
.search .shape-left img,.search .shape-right img,.search .shape-bottom img{width: 100%;height: auto;}
.search h1{font-family: 'Roboto',sans-serif;font-weight: 600;font-size: 48px;line-height: 52px;color: #fff;}

.searchheading {position: relative;}
.searchheading .text-wrapper {position: relative;display: inline-block;overflow: hidden;}
.searchheading .letter {display: inline;line-height: 1em; font-size:45px;}

.search p{font-family: 'Roboto',sans-serif;font-weight: 400;font-size: 18px;line-height: 24px;color: #fff;}
.searchbox{margin: 20px 0;background: #fff;border-radius: 30px;width: 100%;position: relative;}
.searchbox input{background: transparent;border: none;width: 100%;padding: 15px 130px 15px 25px;outline: none;font-style: normal;font-weight: 400;font-size: 16px;color: #6b707f;}
.searchbox input::-webkit-placeholder{color: #6b707f;opacity: 1;}
.searchbox input::-moz-input-placeholder{color: #6b707f;opacity: 1;}
.searchbox input::-ms-input-placeholder{color: #6b707f;opacity: 1;}
.searchbox button{position: absolute;right: 0;top: 0;padding: 15px 40px;background: #2579ff;color: #fff;border-radius: 30px;border: none;outline: none;font-style: normal;font-weight: 600;font-size: 16px;}
.searchtags{display: flex;align-items: center;justify-content: center;list-style: none;column-gap: 15px;padding: 0;}
.searchtags li{font-style: normal;font-weight: 600;font-size: 14px;line-height: 16px;color: #fff; z-index: 999;}
.searchtags li a{display: inline-block;font-style: normal;font-weight: 500;font-size: 14px;background: #2579ff;color: #fff;padding: 8px 12px;border: 1px solid #2579ff;border-radius: 30px;}
.category{background: #fff;padding: 30px 0;position: relative;overflow: hidden;}
.category .shape_left{background: linear-gradient(156.41deg, rgb(37 121 255 / 4%) -17.11%, rgba(255, 255, 255, 0.19) 100%);transform: matrix(0.5, -0.87, -0.87, -0.5, 0, 0);width: 110px;height: 155px;position: absolute;left: -80px;bottom: 0;}
.category .shape_right{background: linear-gradient(156.41deg, rgb(37 121 255 / 4%) -17.11%, rgba(255, 255, 255, 0.19) 100%);transform: rotate(-120deg);width: 110px;height: 155px;position: absolute;right: -80px;top: 0;}
.category h4{font-family: 'Roboto',sans-serif;font-weight: 600;font-size: 34px;line-height: 52px;margin: 0 0 20px;padding: 0 0 20px;border-bottom: 1px solid #bdbdbd;}
.category .catlist{display: flex;align-items: center;justify-content: space-around;padding: 0;margin: 40px 0 60px;}
.category .catlist li{text-align: center;display: block; width:25%; padding:0px 20px; margin:0px 20px;}
.category .catlist li .icon{display: inline-block;width: 100px;height: 100px;line-height: 100px;border-radius: 50%;background: #fff;border: 1px solid #f2f2f2;box-shadow: 0px 17px 60px rgba(0, 0, 0, 0.04);text-align: center;margin-bottom: 15px;position: relative;z-index: 1;}
.category .catlist li .icon img{width: 65px;height: auto;}
.category .catlist li p{font-family: 'Roboto',sans-serif;font-weight: 600;font-size: 18px;line-height: 30px;color: #585858;margin-bottom: 0;}
.category .catlist li span{font-family: 'Roboto',sans-serif;font-weight: 400;font-size: 18px;line-height: 26px;color: #4F4F4F;}
.category ul.searchtags {display: block;padding: 0;}
.category ul.searchtags li{display: inline-block;margin: 7px 7px}
.wordsdata{margin: 0 0 20px;padding: 0;}
.wordsdata li{display: block;font-style: normal;font-weight: 400;font-size: 20px;color: #6b707f;}
.wordsdata li p{font-style: normal; word-wrap: break-word; font-weight: 600;font-size: 25px;color: #2000e4;margin: 0;}
.listen{font-style: normal;font-weight: 400;font-size: 20px;color: #6b707f;}
footer{background: #e7c200;padding: 20px 0;position: relative;}
footer .shape-left{position: absolute;left: 0;bottom: -5px;width: 250px;height: auto;}
footer .shape-right{position: absolute;right: 0;bottom: -5px;width: 250px;height: auto;}
footer .shape-left img,footer .shape-right img{width: 100%;}
footer p{font-family: 'Roboto',sans-serif;font-style: normal;font-weight: 400;font-size: 18px;line-height: 26px;color: #fff;margin: 0;}
.rotate-in-down-left {animation: rotate-in-down-left 2s ease;}
.swing {transform-origin: top center;animation: swing 2s ease;}
.bounce {animation: bounce 2s ease;}
.grow {animation: grow 2s ease;}
.flash {animation: flash 500ms ease;}
.bounce-in {animation: bounce-in 2s ease infinite;}
@keyframes bounce-in {
	0% {
		opacity: 1;
		transform: scale(0.9);
	}
	50% {
		opacity: 1;
		transform: scale(1);
	}
	70% {
		opacity: 1;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes flash {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes rotate-in-down-left {
	0% {
		transform-origin: left bottom;
		transform: rotate(-90deg);
		opacity: 0;
	}
	100% {
		transform-origin: left bottom;
		transform: rotate(0);
		opacity: 1;
	}
}
@keyframes bounce {
	70% {
		transform: translateY(0%);
	}
	80% {
		transform: translateY(-15%);
	}
	90% {
		transform: translateY(0%);
	}
	95% {
		transform: translateY(-7%);
	}
	97% {
		transform: translateY(0%);
	}
	99% {
		transform: translateY(-3%);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes swing {
	20% {
		transform: rotate(15deg);
	}
	40% {
		transform: rotate(-10deg);
	}
	60% {
		transform: rotate(5deg);
	}
	80% {
		transform: rotate(-5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes grow {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}
.search .list-group {
    position: absolute;
    top: 100%;
    height: 250px;
    width: 92%;
    overflow-y: auto;
    left: 30px;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
    border-radius: 5px 5px 0 0;
    background: #fff;
}
.search .list-group::-webkit-scrollbar {
  width: 8px;
}
 
.search .list-group::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
 
.search .list-group::-webkit-scrollbar-thumb {
  background-color: #2579ff;
  outline: 1px solid slategrey;
}
.search .list-group a.list-group-item.list-group-item-action {
    border: none;
    text-transform: capitalize;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    border:1px solid #f1f1f1 !important;
    line-height:20px;
}

.search .list-group a.list-group-item.list-group-item-action:hover {background: #f6f6f6;transition: all 500ms ease;}

.searchbox button, .searchbox button::after {
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}
.searchbox button::before, .searchbox button::after {
    background: #0c52c3;
    content: '';
    position: absolute;
    z-index: -1;
}
.searchbox button{overflow: hidden;display: inline-block;z-index: 1;}
.searchbox button:after {
 /* background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.searchbox button:hover:after {
  height: 100%;
  width: 135%;
}
@media screen and (min-width:0px) and (max-width:991px) 
{
.m-left{text-align: left;}
.m-pt80{padding-top: 80px;}
header .col-xs-12{width: 50%;float: left;}
header .col-xs-12:last-child{text-align: right;}
header .logo{width: 150px;}
header .button {margin-top: 0;}
.menu{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 11;padding: 20px 15px;}
.menu li:last-child{display: none;}
.category h4{text-align: left;font-size: 22px;}
.category .catlist{display: block;margin: 0;}	
.category .catlist li{width: 50%;float: left;margin: 20px 0; min-height: 215px;}
.search .shape-left,.search .shape-right,.search .shape-bottom,footer .shape-left,footer,footer .shape-right{display: none;}
body{padding-bottom: 40px;}
.searchtags{display: block;text-align: left;}
.searchtags li{display: inline-block; margin:5px;}
.searchtags li:first-child{padding-right: 10px;}
}