#vapSection {
    width : 100%;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
  }

  #filterContainer > form {
    display : flex;
    align-items : center;
    justify-content : space-around;
    flex-wrap : wrap;
  }

  /* navContainer */

  #navContainer {
    min-width : 50%;
    max-width : 80%;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    flex-wrap : wrap;
  }

  .navCbx {
    display : none;
  }

  .navLabel {
    padding : 10px;
    margin : 0;
    cursor : pointer;
    transition-duration : 0.5s;
    font-family : var(--themeFont);
    background-color : white;
  }

  .navLabel:hover {
    background-color : var(--darkRed);
    color : white;
  }

  #all:checked ~ #lblAll, #home:checked ~ #lblHome, #car:checked ~ #lblCar, #personal:checked ~ #lblPersonal, #business:checked ~ #lblBusiness, #health:checked ~ #lblHealth {
    background-color : var(--black);
    color : white;
  }

  #searchContainer {
    background-color : white;
    border : 0;
    padding : 10px;
    border-radius : 20px;
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : space-between;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }

  #search {
    background-color : rgb(0,0,0,0);
    border : 0;
    font-family : var(--themeFont);
  }

  #search:focus {
    outline: none !important;
  }

  #searchBtn {
    border : 0;
    width : 16px;
    height : 16px;
    background : url("https://www.freepnglogos.com/uploads/search-png/search-icon-transparent-images-vector-15.png");
    background-size : contain;
    background-repeat : no-repeat;
    background-position : center;
    cursor : pointer;
  }

  /* End navContainer */

  /* cards */

  #cardContainer {
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    flex-wrap : wrap;
    margin : 20px;
  }

  .card {
    background-color : lightblue;
    width : 300px;
    height : 300px;
    margin : 10px;
    overflow : hidden;
  }

  .card:hover > * {
    bottom : 0;
  }

.cardInfo {
  position : relative;
  text-align : center;
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : flex-end;
  background-color : rgb(0,0,0,0.7);
  width : 100%;
  height : 100%;
  transition-duration : 0.5s;
  bottom : -90%;
  color : white;
  position : relative;
}

  .cardInfo > p {
    max-width : 80%;
    margin : 5px;
  }

  .cardHeader {
    font-family : var(--themeFont);
    font-size : 22px;
    color : white;
    background-color : var(--darkRed);
    background : var(--gradient);
    width : 100%;
    height : 10%;
    padding-top : 5px;
    padding-bottom : 5px;
    margin : 0;
    position : absolute;
    top : 0;
    left : 0;
  }

  .cardText {
    font-family : var(--themeFont);
  }

  #carhire {
    background : url("https://images.unsplash.com/photo-1524345591067-da3f166c0e42?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #appliance {
    background : url("https://images.unsplash.com/photo-1484154218962-a197022b5858?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #legal {
    background : url("https://images.unsplash.com/photo-1589216532372-1c2a367900d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #excess {
    background : url("https://images.unsplash.com/photo-1614260938313-a7fc1a7ad0d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #gadget {
    background : url("https://images.unsplash.com/photo-1498049794561-7780e7231661?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #gap {
    background : url("https://images.pexels.com/photos/13733522/pexels-photo-13733522.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #medical{
    background : url("https://images.unsplash.com/photo-1584467735867-4297ae2ebcee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=705&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #funeral{
    background : url("https://images.unsplash.com/photo-1567393673970-d11735a71c10?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzV8fGZ1bmVyYWx8ZW58MHx8MHx8fDA%3D");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #mechanical {
    background : url("https://images.pexels.com/photos/4489737/pexels-photo-4489737.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #personalLegal {
    background : url("https://images.unsplash.com/photo-1603796846097-bee99e4a601f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #pet {
    background : url("https://images.unsplash.com/photo-1525983360072-2ebda055ba40?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #indemnity {
    background : url("https://images.unsplash.com/photo-1425421669292-0c3da3b8f529?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #rental {
    background : url("https://images.unsplash.com/photo-1516501312919-d0cb0b7b60b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1304&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #scratch {
    background : url("https://images.unsplash.com/photo-1494009041405-cb00eb38b186?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1025&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #riot {
    background : url("https://images.unsplash.com/photo-1588154040863-5aedd8b5b4b6?q=80&w=1989&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : bottom;
  }

  #travel {
    background : url("https://images.unsplash.com/photo-1523906834658-6e24ef2386f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=683&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : bottom;
  }

  #tyre {
    background : url("https://images.unsplash.com/photo-1444947295498-07f60c19a4ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : bottom;
  }

  #equine {
    background : url("https://images.unsplash.com/photo-1593522131640-d4e54be09e4d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #evacuate {
    background : url("https://images.pexels.com/photos/1853537/pexels-photo-1853537.jpeg?auto=compress&cs=tinysrgb&w=600");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : bottom;
  }

  #transit {
    background : url("https://images.unsplash.com/photo-1612630741022-b29ec17d013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #marine {
    background : url("https://images.unsplash.com/photo-1578575437130-527eed3abbec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #heavyVehicles {
    background : url("https://images.unsplash.com/photo-1586191552066-d52dd1e3af86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1075&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : top;
  }

  #security {
    background : url("https://img.freepik.com/free-photo/security-guard-protecting-client_23-2148404004.jpg?w=900&t=st=1666085388~exp=1666085988~hmac=540c796bc6ffc112d1cbd5e87ac0eae40bdf0067289e7e0faa8d5e439b4eafba");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : center;
  }

  #specie {
    background : url("https://images.unsplash.com/photo-1582139329536-e7284fece509?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : bottom;
  }

  #sugar {
    background : url("https://images.unsplash.com/photo-1504053587917-5f214fde5be2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=997&q=80");
    background-size : cover;
    background-repeat : no-repeat;
    background-position : left;
  }

  @media screen and (max-width: 980px) {

    #cardContainer {
      flex-direction : column;
      margin : 20px;
    }

    .card {
      width : 80vw;
      height : 80vw;
      margin : 10px;
      overflow : hidden;
    }

    .cardInfo {
      position : relative;
      text-align : center;
      display : flex;
      flex-direction : column;
      align-items : center;
      justify-content : center;
      background-color : rgb(0,0,0,0.7);
      width : 100%;
      height : 100%;
      transition-duration : 0.5s;
      bottom : -100%;
      color : white;
    }

      .cardInfo > p {
        max-width : 80%;
        margin : 10px;
      }

      .cardHeader {
        margin : 10px;
      }

      .cardText {
        font-family : var(--themeFont);
      }

      /* navContainer */

      #navContainer {
        min-width : 80%;
        max-width : 90%;
        display : flex;
        flex-direction : column-reverse;
        align-items : center;
        justify-content : space-between;
        margin : 20px;
      }

      .navLabel {
        padding : 10px;
        margin : 0;
        cursor : pointer;
        transition-duration : 0.5s;
        font-family : var(--themeFont);
      }

      #searchContainer {
        padding : 20px;
        border-radius : 50px;
        margin : 50px;
      }

      #searchBtn {
        width : 40px;
        height : 40px;
      }

  }