BottomSection.module.scss

@import "../../../utils";
@import "../../../style/fonts";
@import "../../../style/colors";

.BottomSection {
  background-image: url('#{$assetPath}/curves/courbe_4.png'), url('#{$assetPath}/props/bateau.svg'), url('#{$assetPath}/props/algue.svg');
  background-repeat: no-repeat;
  background-position: bottom, 105% 40%, -5% 55%;
  background-size: 100% 50%, 35% 35%, 40% 40%;
  min-height: 180vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  font-family: $primary_font;
  font-weight: $primary_font_weight;
  padding-top: 10%;
  position: relative;


  .MiddleBlock {
    padding: 2% 2%;
    background: $primary_beige;
    color: $primary_black;
    border-radius: 10px;
    max-width: 50vw;

    display: flex;
    flex-direction: column;
    text-align: left;


    .Title {
      font-size: 1.8vw;
    }

    .Caption {
      display: flex;
      flex-direction: row;

      .Comments {
        flex-basis: 80%;
        padding-right: 5%;

        .FirstComment {
          font-size: 1.2vw;
        }

        .SecondComment {
          font-size: 0.8vw;
        }

      }

      .ButtonContainer {
        flex-basis: 20%;
        position: center;
        padding-right: 10%;

        Button {
          margin-top: 20%;
          font-family: $primary_font;
          font-weight: $primary_font_weight;
          font-size: 0.9vw;
          width: 100%;
          height: 30%;

        }

      }


    }

  }

  .BottomBlock {

    position: absolute;
    bottom: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .Logos {
      max-width: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;

      img {
        margin-bottom: 2%;
        width: 50%;
        height: 40%;
        background: white;
      }

      p {
        max-width: 50%;
        text-align: left;
        color: white;
        font-size: 0.9vw;
      }
    }

    .ContactLinks {
      max-width: 20%;
      display: flex;
      flex-direction: column;
      text-align: left;


      .BigCaption {
        color: white;
        font-size: 1.1vw;
        margin-bottom: 10%;
      }

      Button {
        align-items: center;
        margin-bottom: 5%;
        font-family: $primary_font;
        font-weight: $primary_font_weight;
        font-size: 0.9vw;
        width: 100%;
        height: 30%;

      }

      .SmallCaption {
        color: white;
        font-size: 1vw;
      }
    }
  }

}

@media (max-width: 768px) {
  .BottomSection {
    min-height: 100vh;
    background-position: bottom, 105% 48%, -5% 60%;

    .MiddleBlock {
      max-width: 80vw;

      .Title {
        font-size: 3vw;
      }

      .Caption {

        flex-direction: column;

        .Comments {

          .FirstComment {
            font-size: 2.4vw;
          }

          .SecondComment {
            font-size: 1.6vw;
          }

        }

        .ButtonContainer {
          max-width: 60%;
          align-self: center;

          Button {
            font-family: $primary_font;
            font-weight: $primary_font_weight;
            font-size: 2vw;
            width: 100%;
            height: 50%;

          }

        }


      }
    }

    .BottomBlock {

      display: flex;
      flex-direction: row;
      justify-content: center;
      bottom: 5%;

      .Logos {
        margin-right: 5%;
        max-width: 40%;
        flex-direction: column;


        img {
          width: 100%;
          height: 40%;
        }

        p {
          max-width: 100%;

          font-size: 1.8vw;
        }
      }

      .ContactLinks {
        max-width: 40%;

        .BigCaption {
          font-size: 2.2vw;
          margin-bottom: 10%;
        }

        Button {
          font-size: 1.8vw;
          width: 100%;
          height: 30%;

        }

        .SmallCaption {
          font-size: 2vw;
        }
      }
    }
  }
}

@media (max-width: 375px) {
  .BottomSection {
    min-height: 70vh;
  }
}