/*Fonts*/
body {
     font-family: "Nunito";
     font-weight: 300;
     color: rgb(247, 253, 255);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
}

img {
     width: 20%;
     height: auto;
}

h2,
h3 {
     font-family: "Quicksand";
     color: rgb(5, 134, 89);
     background-color: rgb(223, 255, 226);
     width: fit-content;
     font-size: 2rem;
     margin: 3% 0 1%
}

h1 {
     font-size: 5.4rem;
     text-align: center;
     font-family: "Quicksand";

     :hover {
          transition: transform 500ms;
          transform: translateY(-4px);
          transform: scale(1.03);
     }
}

p {
     font-size: 1.4rem;
     color: rgb(13, 176, 122);
}

.subheading {
     color: rgb(255, 248, 239);
}

.explain {
     text-align: justify;
     text-align-last: center;
     font-size: 1.3rem;
     margin: 1.5% 25%;
     color: rgb(21, 128, 92);
}

.button {
     color: rgb(26, 221, 146);
}

/* Now everything else D: */

.row {
     display: flex;
     justify-content: space-between;
     margin: 2vw 26vw;
}

.card {
     flex-basis: 27%;
     flex-shrink: 0;
     background-color: rgb(255, 255, 255);
     padding: 1.4%;
     transition: transform 300ms;
     border-radius: 3%;
}

.card-image1 img,
.card-image2 img,
.card-image3 img {
     width: 100%;
     overflow: hidden;
     transition: transform 500ms;
     display: block;
     border-radius: 4%;
}

.card:hover {
     transform: translateY(-4px);
}

.card:hover .card-image1 img,
.card:hover .card-image2 img,
.card:hover .card-image3 img {
     transform: scale(1.03);
}

.title {
     flex-basis: 24%;
     flex-shrink: 0;
     transition: ease 300ms;
}

.title:hover {
     transition: ease 500ms;
     transform: scale(1.03);
}

.banner-image {
     background-image: url(images/heroimage.jpg);
     width: 100%;
     padding: 5% 0;
}

.banner-text {
     text-align: center;
}

/* Media queries XV */
@media only screen and (max-width: 1700px) {
     .row {
          margin: 2vw 20vw
     }

     .card {
          flex-basis: 30%;
          flex-shrink: 0;
     }
}

@media only screen and (max-width: 1300px) {
     .row {
          margin: 2vw 15vw;
          flex-wrap: wrap;
          align-items: center;
     }

     .card {
          flex-basis: 65%;
          display: block;
          width: 100%;
          margin: 2% 15% 0;
     }

     .card-image1, .card-image2, .card-image3 {
          max-width: 100%;
          max-height: 50%;
          object-fit: cover;
          display: flex;
     }
}

@media only screen and (max-width: 1000px) {
     .card {
          flex-basis: 90%;
          display: block;
          margin: 4% 5% 0;
          width: 100%;
     }

     h1 {
          font-size: 4rem;
     }
}

@media only screen and (max-width: 700px) {
     h1 {
          font-size: 3.4rem
     }

     h2 {
          font-size: 1.8rem
     }

     p {
          font-size: 1.2rem
     }

     .explain {
          font-size: 1.1rem;
          margin: 1.5% 15%;
     }
}

@media only screen and (max-width: 600px) {
     h1 {
          font-size: 2.9rem;
     }
}