html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #1e1717;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
      background-image:linear-gradient(rgba(0, 0, 0, 0.78),rgba(0, 0, 0, 0.596)), url(../img/pexels-chanaka-906494.jpg);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      text-transform: capitalize;

    }

    .swiper-slide:nth-child(1) {
      background-image:linear-gradient(rgba(0, 0, 0, 0.78),rgba(0, 0, 0, 0.596)), url(../img/misc-img/hand-shake.jpg);

    }
    .swiper-slide:nth-child(2) {
      background-image:linear-gradient(rgba(0, 0, 0, 0.78),rgba(0, 0, 0, 0.596)), url(../img/misc-img/towers.jpg);


    }
    .swiper-slide:nth-child(3) {
      background-image:linear-gradient(rgba(0, 0, 0, 0.78),rgba(0, 0, 0, 0.596)), url(../img/misc-img/waste-paper.jpg);
      

    }

    .gallery-slider  .swiper-slide:nth-child(1) {
      background-image:linear-gradient(rgba(0, 0, 0, 0.78),rgba(0, 0, 0, 0.596)), url(../img/misc-img/waste-paper.jpg);

    }
    .gallery-slider  .swiper-slide:nth-child(2) {
      background-image:linear-gradient(rgba(0, 0, 0, 0.78),rgba(0, 0, 0, 0.596)), url(../img/misc-img/sugar-rice.jpg);

    }
    .gallery-slider  .swiper-slide:nth-child(3) {
      background-image:linear-gradient(rgba(0, 0, 0, 0.78),rgba(0, 0, 0, 0.596)), url(https://img.freepik.com/premium-photo/oil-barrels-blue-chemical-drums-horizontal-stacked-up_478515-6.jpg?size=626&ext=jpg&ga=GA1.1.1826414947.1699833600&semt=ais);

    }

    .slider-words{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .gallery h1{
      display: flex;
      justify-content: center;
    }
  

    .row {
      display: flex;
      flex-wrap: wrap;
      padding: 0 1px;
    }
    
    /* Create four equal columns that sits next to each other */
    .column {
      flex: 33%;
      max-width: 33%;
      padding: 0 1px;
     
    }
    
    .column img {
      margin-top: 8px;
      vertical-align: middle;
      width: 100%;
    }
    
    /* Responsive layout - makes a two column-layout instead of four columns */
    @media screen and (max-width: 800px) {
      .column {
        flex: 50%;
        max-width: 50%;
      }
    }
    
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .column {
        flex: 100%;
        max-width: 100%;
      }
    }