global.css

/* Reset default browser styles  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Font For Site  */
@font-face {
  font-family: "Forager";
  src: local("Forager Bold"), local("Forager-Bold"),
    url("fonts/Forager-Bold.woff2") format("woff2"),
    url("fonts/Forager-Bold.woff") format("woff"),
    url("fonts/Forager-Bold.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "CloudySunday";
  src: local("CloudySunday"), local("CloudySunday"),
    url("fonts/CloudySunday.otf") format("otf"),
    url("fonts/CloudySunday.ttf") format("truetype");
  font-style: normal;
}

/* HTML css  */
html {
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  font-family: Forager;
}

/* A11y */
::-moz-selection {
  color: #eeeeee;
  background: #052e16;
}
::selection {
  color: #eeeeee;
  background: #052e16;
}
::-webkit-scrollbar {
  display: none;
}

/* Body base designs  */
body {
  overflow-x: hidden;
  background: linear-gradient(
    137deg,
    rgb(42, 171, 207) 0%,
    rgba(0, 155, 186, 1) 100%
  );
}

/* Hero styles for landing  */
header {
  min-height: 100vh;
  text-align: center;
  padding-top: 8rem;
  display: grid;
  font-family: CloudySunday !important;
  place-items: center;
  overflow-wrap: break-word;
  background: linear-gradient(
    137deg,
    rgb(50, 154, 238) 0%,
    rgba(0, 155, 186, 1) 100%
  );

  h1 {
    font-weight: 900;
    max-width: 70%;
    margin: 5rem 0px;
    font-size: 2.5rem;
    color: #ebebeb;
    line-height: 1;
    overflow-wrap: break-word;
    text-shadow: -2px 2px 0 #000, 2px 2px 0 #000, 2px -2px 0 #000,
      -2px -2px 0 #000;
    @media (min-width: 768px) {
      font-size: 5rem;
    }
  }

  section {
    width: 100vw;
    height: 40vh;
    background: rgb(225, 170, 95);
    filter: contrast(1.2);
    background: radial-gradient(
      circle,
      rgba(225, 170, 95, 1) 0%,
      rgba(144, 90, 57, 1) 100%
    );

    .plant {
      filter: contrast(0.8) !important;
      margin: 0 2rem;
    }
  }
}

/* Facts section  */
section:has(> article) {
  background: linear-gradient(
    to bottom,
    rgb(35, 116, 182) 0%,
    rgb(19, 61, 139) 100%
  );
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;

  article {
    display: grid;
    place-items: center;
    border-radius: 2rem;
    border-width: 0.3rem;
    border-style: dashed;
    border-color: #052e16;
    background: rgb(225, 170, 95);
    background: radial-gradient(
      circle,
      rgba(225, 170, 95, 1) 10%,
      rgba(144, 90, 57, 1) 35%
    );

    @media (min-width: 768px) {
      font-size: 4.25rem;
      min-height: 60vh;
      padding: 3rem 1rem;
    }

    p,
    ul {
      max-width: 90%;
      text-align: justify;
      margin: 2rem 0px;
      font-size: 1rem;
      letter-spacing: 0.025em;
      @media (min-width: 768px) {
        margin-top: 0.3rem;
        font-size: 1.9rem;
        max-width: 60%;
      }
    }

    h2 {
      margin: 2rem 0px;
      color: #052e16;
      text-shadow: -2px 2px 0 #fff, 2px 2px 0 #fff, 2px -2px 0 #fff,
        -2px -2px 0 #fff;
      letter-spacing: 0.05em;
      font-size: 2rem;
      font-family: CloudySunday;
      font-weight: 870;
      letter-spacing: 0.025em;
      overflow-wrap: break-word;
      max-width: 90%;
      margin-bottom: 0.6rem;
      text-align: center;
      line-height: 2.8rem;
      text-decoration: underline;
      text-decoration-style: wavy;
      text-underline-offset: 8px;

      @media (min-width: 768px) {
        font-size: 4.25rem;
        line-height: 6rem;
        max-width: 77%;
        margin-bottom: 0.5em;
      }
    }
  }
}

/* CTO  */
.action-call {
  width: 90vw;
  display: grid;
  margin: 3rem auto;
  padding: 3rem 2rem;
  border-radius: 2rem;
  background-color: #ffffff21;
  backdrop-filter: blur(12px);
  place-items: center;

  h2 {
    text-align: center;
    letter-spacing: 0.05em;
    font-size: 2.25rem;
    font-family: CloudySunday;
    font-weight: 870;
    text-shadow: -4px 4px 0 #052e16, 4px 4px 0 #052e16, 4px -4px 0 #052e16,
      -4px -4px 0 #052e16;
    color: #fff;
    letter-spacing: 0.025em;
    max-width: 95%;

    @media (min-width: 768px) {
      font-size: 4.25rem;
      line-height: 6rem;
      max-width: 77%;
      margin-bottom: 0.5em;
    }
  }

  p {
    text-align: center;
    filter: contrast(1.3);
    max-width: 90%;
    text-align: justify;
    margin: 2rem 0px;
    color: #052e16;
    font-size: 1rem;
    letter-spacing: 0.025em;

    @media (min-width: 768px) {
      margin-top: 0.3rem;
      font-size: 1.9rem;
      max-width: 60%;
    }
  }

  a {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.7rem;
    padding-right: 1.7rem;
    border-radius: 2rem;
    background: linear-gradient(137deg, #052e16 0%, #076e32 100%);
    color: white;
    display: inline-flex;
    font-family: CloudySunday;
    text-decoration: none;
    font-size: 1.5rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

    &:hover {
      transform: scale(1.1);
    }

    @media (min-width: 768px) {
      transform: scale(1.02);
      scale: 1.3;
    }
  }
}

/* Testimonials section  */
.testimonial {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 0px;
  background: linear-gradient(
    to top,
    rgb(35, 116, 182) 0%,
    rgb(19, 61, 139) 100%
  );

  h2 {
    font-family: CloudySunday;
    color: rgb(214, 214, 214);
    text-align: center;
    letter-spacing: 0.05em;
    text-shadow: -2px 2px 0 #fff, 2px 2px 0 #fff, 2px -2px 0 #fff,
      -2px -2px 0 #fff;
    font-size: 2.25rem;

    @media (min-width: 768px) {
      font-size: 4.25rem;
      line-height: 6rem;
      max-width: 77%;
      margin-bottom: 0.5em;
    }
  }

  p {
    display: block;
    margin: 0 auto;
    border-radius: 1.1rem;
    background: linear-gradient(144deg, #076e32 100%, #052e16af 10%);
    padding: 3rem 2rem;
    font-size: larger;
    overflow-wrap: break-word;
  }
}

/* Events Section  */
.events {
  width: 100vw;
  overflow-x: hidden;
  padding: 3rem 4rem;
  background: #052e16;
  overflow-wrap: break-word;

  h2 {
    color: white;
    font-family: CloudySunday;
    margin-bottom: 1rem;
    font-size: 2rem;
    line-height: 1;
  }

  p {
    color: rgb(192, 192, 192);
    max-width: 70%;
    margin-top: 1rem;
    font-size: larger;

    a {
      background-color: white;
      color: #052e16;
      padding: 1px 5px;
    }
  }
}

/* Last quote in footer  */
footer {
  display: grid;
  place-items: center;
  padding: 4rem 2rem;
  background: linear-gradient(
    to bottom,
    rgb(35, 116, 182) 0%,
    rgb(19, 61, 139) 100%
  );

  p {
    height: 65vh;
    color: aliceblue;
    display: grid;
    place-items: center;
    align-items: center;
    border-radius: 1rem;
    font-weight: bold;
    letter-spacing: 0.05rem;
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: linear-gradient(
      to bottom,
      rgb(19, 61, 139) 0%,
      rgb(35, 116, 182) 100%
    );
    border: 1.1rem double #fff;
    line-height: 1;
    font-size: 2.8rem;
    padding: 0rem 3.5rem;
    overflow-wrap: break-word;
  }
}