body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}

html {
  font-size: 62.5%;
}

/* Global Classes  */

.Flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.Wrapper {
  width: 100%;
  max-width: 85%;
  margin: 0 auto;
  padding: 1.5rem;
}

.secHeading {
  font-size: 3rem;
  color: #2d8ad9;
  text-align: center;
  text-transform: uppercase;
}
/* Global Classes  */

/* Categories Section Starts Here  */

.categoryWrapper {
  gap: 30px;
  display: grid;
  margin-bottom: 30px;
  grid-template-columns: repeat(6, 1fr);
}

.cBox {
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  background-color: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition: all linear 0.2s;
}

.cBox:hover {
  transform: scale(1.1);
  background: rgb(140, 56, 181);
   background: linear-gradient(90deg, rgb(177 66 231) 0%, rgb(22 90 148) 100%);
}
.cBox:hover h3 {
  color: white;
}

.cBox h3 {
  color: #2d8ad9;
  margin-bottom: 0;
  font-size: 1.6rem;
  text-align: center;
}

.cImage {
  height: 115px;
  border-radius: 5px;
  background-color: white;
}

.cImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Categories Section Ends Here  */

/* Media Query Starts Here */

/* For screens less than or equal to 991px */
@media (max-width: 991px) {
  .categoryWrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* For screens less than or equal to 880px */
@media (max-width: 880px) {
  /* Styles for 880px */
}

/* For screens less than or equal to 720px */
@media (max-width: 768px) {
  /* Styles for 720px */
}

/* For screens less than or equal to 640px */
@media (max-width: 640px) {
  /* Styles for 640px */
}

/* For screens less than or equal to 560px */
@media (max-width: 560px) {
  .categoryWrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* For screens less than or equal to 480px */
@media (max-width: 480px) {
  /* Styles for 480px */
}

/* For screens less than or equal to 320px */
@media (max-width: 320px) {
  /* Styles for 320px */
}

/* Media Query Ends Here */
