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

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-image {
          img {
               width: 100%;
               overflow: hidden;
               transition: transform 500ms;
               display: block;
               border-radius: 4%;
          }
     }

     &:hover {
          transform: translateY(-4px);

          .card-image img {
               transform: scale(1.03);
          }
     }
}

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

     &: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-image {
          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;}
}