/*--------css grid for categories-------- */
                .spacecat {
                    padding: 3px;
                }
                .centeredtextcat {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
                .textpos {
                    position: relative;
                  }

            .imggrid {
              display: grid;
              grid-template-columns: repeat(2, 5fr);
              grid-auto-rows: 300px;
              grid-gap: 8px;
            }
            .imgtextcolor {
                color: white;
                font-size: 32px;
              }
  

            @media only screen and (max-width: 600px) {
              .imggrid {
                grid-auto-rows: 200px;
              }
              .imgtextcolor {
                font-size: 25px !important;
              }
            }
            
            

            
            .imgstyle {
              width: 100%;
              height: 100%;
              object-fit: cover;
              filter: brightness(70%);
              /*opasity animation when mouse leaves hovering state */
              transition: all 0.2s ease-in-out 0s; /* vendorless fallback */
            -o-transition: all 0.2s ease-in-out 0s; /* opera */
            -ms-transition: all 0.2s ease-in-out 0s; /* IE 10 */
            -moz-transition: all 0.2s ease-in-out 0s; /* Firefox */
            -webkit-transition: all 0.2s ease-in-out 0s; /*safari and chrome */
            }

            

            .imgstyle::before {
              filter: brightness(70%);
            }

            /*css on hover of images to daken with ease */
            .imgstyle:hover {
              filter: brightness(40%);
              transition: all 0.2s ease-in-out 0s;
            }

            .imgstylesm {
              width: 100%;
              height: 100%;
              object-fit: cover;
              filter: brightness(100%);
              /*opasity animation when mouse leaves hovering state */
              transition: all 0.2s ease-in-out 0s; /* vendorless fallback */
            -o-transition: all 0.2s ease-in-out 0s; /* opera */
            -ms-transition: all 0.2s ease-in-out 0s; /* IE 10 */
            -moz-transition: all 0.2s ease-in-out 0s; /* Firefox */
            -webkit-transition: all 0.2s ease-in-out 0s; /*safari and chrome */
            }

            .imgstylesm::before {
              filter: brightness(100%);
            }

            /*css on hover of images to daken with ease */
            .imgstylesm:hover {
              filter: brightness(70%);
              transition: all 0.2s ease-in-out 0s;
            }
            /*css animations */
            .grida {
                animation-name: grida1;
                animation-duration: 1.5s;
              }
  
              @keyframes grida1 {
                from {
                 transform: translate(0px, 200px);
                }
                to {
                  transform: translate(0px, 0px);
                }
              }
  
              .gridb {
                animation-name: grida2;
                animation-duration: 1.5s;
                
              }
  
              @keyframes grida2 {
                from {
                 transform: translate(0px, 100px);
                }
                to {
                  transform: translate(0px, 0px);
                }
              }

            /*---------END OF CSS FOR CAT---------*/