@media only screen and (max-width: 1920px) {}

* {
  padding: 0;
  margin: 0;
  color: white;
  font-family: "Montserrat", sans-serif;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

#main {
  display: grid;
  grid-template-columns: 5% 95%;
  grid-template-rows: 100vh;
  width: 100%;
  height: 100vh;

  header {
    display: flex;
    flex-direction: column;

    #menu {
      display: inherit;
      width: 100%;
      height: 90px;
      justify-content: center;
      align-items: center;
      background-color: black;

      div:not(aside div) {
        display: inherit;
        justify-content: center;
        align-items: center;

        input[type="checkbox"] {
          cursor: pointer;
          width: 30px;
          height: 30px;
          position: absolute;
          z-index: 41;
          opacity: 0;

          &:checked {
            z-index: 1000;

            &~aside {
              left: 0;
            }
          }
        }

        &::before {
          width: 30px;
          height: 30px;
          content: url("assets/bars-solid.svg");
          position: absolute;
          z-index: 40;
        }
      }

      aside {
        display: grid;
        grid-template-columns: repeat(3, 90px);
        grid-template-rows: 90px repeat(2, calc(calc(100vh - 90px) / 2));
        position: fixed;
        top: 0;
        left: -270px;
        z-index: 999;
        background-color: white;
        width: 270px;
        height: 100vh;
        transition: all 0.2s;

        div {
          display: flex;

          &:first-child {
            grid-column: 1/1;
            grid-row: 1/2;
            align-items: center;
            justify-content: center;
            background-color: black;

            svg {
              width: 30px;
              fill: white;
            }
          }

          &:nth-child(2) {
            grid-column: 2 / span 2;
            grid-row: 1;
            height: 90px;
            background-color: #2916e0;
          }

          &:nth-child(3) {
            align-self: end;
            grid-column: 1 / span 3;
            grid-row: 2/ 2;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            width: 270px;
            margin-bottom: -5vh;

            ul {
              text-align: center;

              li {
                list-style: none;
                margin-bottom: 25%;
                transition: all 0.5s;

                a {
                  list-style: none;
                  font-size: 30px;
                  font-weight: 600;
                  color: #b2b2b2;
                }

                &:hover a {
                  color: #2916e0;
                }
              }

              .azul a {
                color: #2916e0;
              }
            }
          }

          &:last-child {
            grid-column: 1 / span 3;
            grid-row: 3;
            align-self: flex-end;
            flex-direction: column;
            align-items: center;
            margin-bottom: 5vh;

            #icons {
              width: 70%;
              justify-content: space-evenly;
              background-color: transparent;
              margin-bottom: 10px;

              svg {
                width: 18px;
                height: 18px;
                fill: #b2b2b2;
              }
            }

            p {
              text-align: center;
              font-weight: 500;
              line-height: 1.8;
              color: #636363;

              span {
                color: #b2b2b2;
              }
            }
          }
        }
      }
    }

    div:nth-child(2) {
      height: calc(100vh - 30px);
      display: inherit;
      flex-direction: inherit;
      align-items: center;
      justify-content: center;

      svg {
        width: 18px;
        height: 18px;
        fill: #636363;
        width: 18px;
        margin-bottom: 55%;
      }
    }
  }

  #container1 {
    display: flex;
    flex-direction: row-reverse;

    section {
      display: flex;
      align-items: end;
      flex-direction: column;
      align-items: start;
      justify-content: end;
      height: 100%;
      width: 10%;
      transition: all 1s;
      background-color: rgba(0, 0, 0, 0.4);
      background-blend-mode: multiply;
      background-position: 15%;

      &:hover {
        width: 60%;
        background-color: rgba(0, 0, 0, 0);

        &:hover~section {
          width: 20%;
          background-color: rgba(0, 0, 0, 0.3);

          div {
            opacity: 0;
          }
        }

        div {
          display: block;
        }
      }

      &:first-child {
        background-image: url("assets/4.jpg.webp");
      }

      &:nth-child(2) {
        background-image: url("assets/3.jpg.webp");
      }

      &:nth-child(3) {
        background-image: url("assets/2.jpg.webp");
      }

      &:nth-child(4) {
        background-image: url("assets/1.jpg.webp");
      }

      &:last-child {
        width: 60%;
        background-image: url("assets/5.jpg.webp");
        background-color: rgba(0, 0, 0, 0);

        div {
          display: block;
        }
      }

      div {
        display: none;
        margin-bottom: 4%;
        margin-left: 4%;

        span:first-child {
          background-color: white;
          color: #2916e0;
          padding: 4px 20px;
        }

        h1 {
          font-size: 60px;
          font-weight: 700;
          margin: 3% 0;
        }

        #text {
          display: flex;
          margin: 0;
          align-items: center;

          img {
            border-radius: 50%;
          }

          span:last-child {
            font-size: 24px;
            font-weight: 600;
          }
        }
      }
    }
  }

  #container2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 60vh 40vh;

    #div1 {
      display: flex;
      grid-row: 1 / span 30vh;
      grid-column: 1/1;
      align-items: center;
      justify-content: center;
      background-position: 50%;
      background-repeat: no-repeat;
      background-image: url("assets/about-bg.png");
      background-color: #2916e0;

      img {
        border-radius: 50%;
      }
    }

    #div2 {
      width: 85%;
      height: 80%;
      justify-self: center;
      align-self: center;
      grid-row: 1 / span 30vh;
      grid-column: 2/2;

      h1 {
        width: max-content;
        font-size: 36px;
        color: #252525;
        border-bottom: 3px solid #2916e0;
        margin-bottom: 19px;
        font-weight: 600;
      }

      p {
        font-size: 16px;
        line-height: 1.6;
        font-weight: 400;
        color: #636363;
        padding-bottom: 9px;
      }
    }

    #div3 {
      display: flex;
      flex-direction: column;
      align-items: center;
      grid-row: 2 / 2;
      grid-column: 1 / 1;
      background-color: #2916e0;
      width: 4fr;
      height: 1fr;

      h1 {
        width: 65%;
        font-weight: 500;
        font-size: 36px;
        margin-bottom: 3%;

        span {
          font-weight: bolder;
        }
      }

      p {
        width: 65%;
        font-weight: 400;
        font-size: 15px;
        line-height: 1.8;
        margin-bottom: 3%;
      }

      div {
        width: 65%;
        display: inherit;
        align-items: center;

        a {
          border: 2px solid rgba(255, 255, 255, 0.3);
          border-radius: 40px;
          color: white;
          font-size: 16px;
          font-weight: 500;
          padding: 9px 10px;
          margin-right: 5%;
        }
      }
    }

    #div4 {
      width: 85%;
      height: 80%;
      justify-self: center;
      align-self: center;
      grid-row: 2 / 2;
      grid-column: 2 / 2;

      h1 {
        width: max-content;
        font-size: 36px;
        color: #252525;
        border-bottom: 3px solid #2916e0;
        margin: 19px 0;
        font-weight: 600;
      }

      #skills {
        display: flex;
        justify-content: space-around;

        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 5% 0;

          &>* {
            color: #252525;
            font-weight: 600;
          }

          .progressCircle {
            display: inherit;
            justify-content: center;
            width: 100px;
            height: 100px;
            font-size: 16px;
            border-radius: 50%;

            #inCircle {
              justify-content: center;
              width: 90px;
              height: 90px;
              border-radius: 50%;
              background: conic-gradient(white 100% 100%);
            }
          }

          #c1 {
            background: conic-gradient(blue 0% 90%,
                lightgray 90% 100%);
          }

          #c2 {
            background: conic-gradient(blue 0% 95%,
                lightgray 95% 100%);
          }

          #c3 {
            background: conic-gradient(blue 0% 80%,
                lightgray 80% 100%);
          }

          #c4 {
            background: conic-gradient(blue 0% 85%,
                lightgray 85% 100%);
          }

          h2 {
            font-size: 20px;
          }
        }
      }
    }
  }

  #container3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;

    iframe {
      width: 100%;
      height: 100vh;
    }

    #contact {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-row: 100%;
      position: fixed;
      background-color: white;
      width: 58%;
      height: 210px;
      z-index: 70;
      margin-bottom: 6%;

      div {
        align-self: center;
        justify-self: center;
        text-align: center;

        svg {
          width: 48px;
          height: 48px;
          fill: #2916e0;
        }

        h3 {
          color: #252525;
          font-weight: 500;
          font-size: 18px;

          span {
            color: #b2b2b2;
          }
        }
      }
    }
  }
}

#mainGallery {
  display: grid;
  grid-template-columns: 5% 95%;
  grid-template-rows: 90px calc(100vh - 90px) 60vh;
  width: 100%;
  height: calc(160vh + 90px);

  header {
    display: flex;
    flex-direction: column;
    grid-row: span 2;
    position: sticky;
    top: 0;
    z-index: 999;

    #menuGallery {
      display: inherit;
      width: 100%;
      height: 90px;
      justify-content: center;
      align-items: center;
      background-color: black;

      div:not(aside div) {
        display: inherit;
        justify-content: center;
        align-items: center;

        input[type="checkbox"] {
          width: 30px;
          height: 30px;
          position: absolute;
          z-index: 41;
          opacity: 0;

          &:checked {
            z-index: 1000;

            &~aside {
              left: 0;
            }
          }
        }

        &::before {
          width: 30px;
          height: 30px;
          content: url("assets/bars-solid.svg");
          position: absolute;
          z-index: 40;
        }
      }

      aside {
        display: grid;
        grid-template-columns: repeat(3, 90px);
        grid-template-rows: 90px repeat(2, calc(calc(100vh - 90px) / 2));
        position: fixed;
        z-index: 999;
        top: 0;
        left: -270px;
        background-color: white;
        width: 270px;
        height: 100vh;
        transition: all 0.2s;

        div {
          display: flex;

          &:first-child {
            grid-column: 1/1;
            grid-row: 1/2;
            align-items: center;
            justify-content: center;
            background-color: black;

            svg {
              width: 30px;
              fill: white;
            }
          }

          &:nth-child(2) {
            grid-column: 2 / span 2;
            grid-row: 1;
            height: 90px;
            background-color: #2916e0;
          }

          &:nth-child(3) {
            align-self: end;
            grid-column: 1 / span 3;
            grid-row: 2/ 2;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            width: 270px;
            margin-bottom: -5vh;

            ul {
              text-align: center;

              li {
                list-style: none;
                margin-bottom: 25%;
                transition: all 0.5s;

                a {
                  list-style: none;
                  font-size: 30px;
                  font-weight: 600;
                  color: #b2b2b2;
                }

                &:hover a {
                  color: #2916e0;
                }
              }

              .azul a {
                color: #2916e0;
              }
            }
          }

          &:last-child {
            grid-column: 1 / span 3;
            grid-row: 3;
            align-self: flex-end;
            flex-direction: column;
            align-items: center;
            margin-bottom: 5vh;

            #icons {
              width: 70%;
              justify-content: space-evenly;
              background-color: transparent;
              margin-bottom: 10px;

              svg {
                width: 18px;
                height: 18px;
                fill: #b2b2b2;
              }
            }

            p {
              text-align: center;
              font-weight: 500;
              line-height: 1.8;
              color: #636363;

              span {
                color: #b2b2b2;
              }
            }
          }
        }
      }
    }

    div:nth-child(2) {
      height: calc(100vh - 30px);
      display: inherit;
      flex-direction: inherit;
      align-items: center;
      justify-content: center;

      svg {
        width: 18px;
        height: 18px;
        fill: #636363;
        width: 18px;
        margin-bottom: 55%;
      }
    }
  }

  #topBar {
    position: sticky;
    background-color: white;
    top: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 90px;
    height: 90px;

    h1 {
      font-size: 24px;
      font-weight: 600;
      align-self: center;
      margin-left: 25%;
      color: #252525;
    }

    ul {
      align-self: center;
      justify-self: end;
      width: 50%;
      margin-right: 3%;

      li {
        font-size: 18px;
        font-weight: 500;
        display: inline;
        list-style: none;
        color: #252525;
        margin-left: 5%;

        &:first-child {
          color: #2916e0;
          margin: 0;
        }
      }
    }

  }

  #containerGallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    height: 160vh;

    section {
      display: flex;
      align-items: end;
      background-repeat: no-repeat;
      background-size: 100% 100%;

      &>div {
        display: inherit;
        align-items: center;
        height: 30%;
        width: 100%;
        opacity: 0;
        transition: all 1s;
        background-color: rgba(0, 0, 0, 0.4);
        box-shadow: 0px -25px 35px 11px rgba(0, 0, 0, 0.4);

        img {
          border-radius: 50%;
          margin: 0 2% 0 4%;
        }
      }

      &:hover>div {
        opacity: 1;
      }

      &:first-child {
        grid-column: span 2;
        grid-row: span 2;
        background-image: url("assets/gallery1.jpg");
      }

      &:nth-child(2) {
        background-image: url("assets/gallery2.jpg");
      }

      &:nth-child(3) {
        background-image: url("assets/gallery3.jpg");
      }

      &:nth-child(4) {
        background-image: url("assets/gallery4.jpg");
        grid-row: span 2;
      }

      &:nth-child(5) {
        background-image: url("assets/gallery5.jpg");
        grid-column: span 2;
        grid-row: 3;
      }

      &:nth-child(6) {
        background-image: url("assets/gallery6.jpg");
        grid-column: span 2;
        grid-row: span 2;
      }

      &:nth-child(7) {
        background-image: url("assets/gallery7.jpg");
      }

      &:nth-child(8) {
        background-image: url("assets/gallery8.jpg");
      }

      &:nth-child(9) {
        background-image: url("assets/gallery9.jpg");
      }

      &:nth-child(10) {
        background-image: url("assets/gallery10.jpg");
        grid-column: span 2;
      }

      &:last-child {
        background-image: url("assets/gallery11.jpg");
      }
    }
  }
}

#mainBlog {
  display: grid;
  grid-template-columns: 5% repeat(5, 1fr);
  grid-template-rows: 120vh;
  width: 100%;
  height: 120vh;

  header {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;

    #menuBlog {
      display: inherit;
      width: 100%;
      height: 90px;
      justify-content: center;
      align-items: center;
      background-color: black;

      div:not(aside div) {
        display: inherit;
        justify-content: center;
        align-items: center;

        input[type="checkbox"] {
          width: 30px;
          height: 30px;
          position: absolute;
          z-index: 41;
          opacity: 0;

          &:checked {
            z-index: 1000;

            &~aside {
              left: 0;
            }
          }
        }

        &::before {
          width: 30px;
          height: 30px;
          content: url("assets/bars-solid.svg");
          position: absolute;
          z-index: 40;
        }
      }

      aside {
        display: grid;
        grid-template-columns: repeat(3, 90px);
        grid-template-rows: 90px repeat(2, calc(calc(100vh - 90px) / 2));
        position: fixed;
        top: 0;
        left: -270px;
        z-index: 999;
        background-color: white;
        width: 270px;
        height: 100vh;
        transition: all 0.2s;

        div {
          display: flex;

          &:first-child {
            grid-column: 1/1;
            grid-row: 1/2;
            align-items: center;
            justify-content: center;
            background-color: black;

            svg {
              width: 30px;
              fill: white;
            }
          }

          &:nth-child(2) {
            grid-column: 2 / span 2;
            grid-row: 1;
            height: 90px;
            background-color: #2916e0;
          }

          &:nth-child(3) {
            align-self: end;
            grid-column: 1 / span 3;
            grid-row: 2/ 2;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            width: 270px;
            margin-bottom: -5vh;

            ul {
              text-align: center;

              li {
                list-style: none;
                margin-bottom: 25%;
                transition: all 0.5s;

                a {
                  list-style: none;
                  font-size: 30px;
                  font-weight: 600;
                  color: #b2b2b2;
                }

                &:hover a {
                  color: #2916e0;
                }
              }

              .azul a {
                color: #2916e0;
              }
            }
          }

          &:last-child {
            grid-column: 1 / span 3;
            grid-row: 3;
            align-self: flex-end;
            flex-direction: column;
            align-items: center;
            margin-bottom: 5vh;

            #icons {
              width: 70%;
              justify-content: space-evenly;
              background-color: transparent;
              margin-bottom: 10px;

              svg {
                width: 18px;
                height: 18px;
                fill: #b2b2b2;
              }
            }

            p {
              text-align: center;
              font-weight: 500;
              line-height: 1.8;
              color: #636363;

              span {
                color: #b2b2b2;
              }
            }
          }
        }
      }
    }

    div:nth-child(2) {
      height: calc(100vh - 30px);
      display: inherit;
      flex-direction: inherit;
      align-items: center;
      justify-content: center;

      svg {
        width: 18px;
        height: 18px;
        fill: #636363;
        width: 18px;
        margin-bottom: 55%;
      }
    }
  }

  section {
    display: grid;
    gap: 10px;

    &:not(:last-child) {
      margin-right: 10px;
    }

    &>div {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      background-repeat: no-repeat;
      background-size: 100% 100%;

      h1 {
        margin: 5%;
        width: min-content;
        padding: 4px 20px;
        font-size: 12px;
        letter-spacing: 2px;
        color: #2916e0;
        text-transform: uppercase;
        font-weight: 600;
        border-radius: 2px;
        background-color: white;
        align-self: flex-start;
      }

      a {
        margin: 8%;
        align-self: end;
        font-size: 20px;
        line-height: 1.6;
        font-weight: 600;

        span {
          font-size: 13px;
        }
      }

    }
  }

  #coluna1 {
    grid-template-rows: 42% 23% 35%;

    div {
      &:first-child {
        background-image: url("assets/blog1.jpg");
      }

      &:nth-child(2) {
        background-image: url("assets/blog6.jpg");
      }

      &:last-child {
        background-image: url("assets/blog11.jpg");
      }
    }
  }

  #coluna2 {
    grid-template-rows: 23% 33% 44%;

    div {
      &:first-child {
        background-image: url("assets/blog2.jpg");
      }

      &:nth-child(2) {
        background-image: url("assets/blog7.jpg");
      }

      &:last-child {
        background-image: url("assets/blog12.jpg");
      }
    }
  }

  #coluna3 {
    grid-template-rows: 42% 33% 25%;

    div {
      &:first-child {
        background-image: url("assets/blog3.jpg");
      }

      &:nth-child(2) {
        background-image: url("assets/blog8.jpg");
      }

      &:last-child {
        background-image: url("assets/blog13.jpg");
      }
    }
  }

  #coluna4 {
    grid-template-rows: 33% 25% 42%;

    div {
      &:first-child {
        background-image: url("assets/blog4.jpg");
      }

      &:nth-child(2) {
        background-image: url("assets/blog9.jpg");
      }

      &:last-child {
        background-image: url("assets/blog14.jpg");
      }
    }
  }

  #coluna5 {
    grid-template-rows: 42% 23% 35%;

    div {
      &:first-child {
        background-image: url("assets/blog5.jpg");
      }

      &:nth-child(2) {
        background-image: url("assets/blog10.jpg");
      }

      &:last-child {
        background-image: url("assets/blog15.jpg");
      }
    }
  }
}

#mainBlogDetails {
  display: grid;
  grid-template-columns: 5% 95%;
  grid-template-rows: 100vh;
  width: 100%;
  height: 360vh;

  header {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;

    #menu {
      display: inherit;
      width: 100%;
      height: 90px;
      justify-content: center;
      align-items: center;
      background-color: black;

      div:not(aside div) {
        display: inherit;
        justify-content: center;
        align-items: center;

        input[type="checkbox"] {
          width: 30px;
          height: 30px;
          position: absolute;
          z-index: 41;
          opacity: 0;

          &:checked {
            z-index: 1000;

            &~aside {
              left: 0;
            }
          }
        }

        &::before {
          width: 30px;
          height: 30px;
          content: url("assets/bars-solid.svg");
          position: absolute;
          z-index: 40;
        }
      }

      aside {
        display: grid;
        grid-template-columns: repeat(3, 90px);
        grid-template-rows: 90px repeat(2, calc(calc(100vh - 90px) / 2));
        position: fixed;
        top: 0;
        left: -270px;
        z-index: 999;
        background-color: white;
        width: 270px;
        height: 100vh;
        transition: all 0.2s;

        div {
          display: flex;

          &:first-child {
            grid-column: 1/1;
            grid-row: 1/2;
            align-items: center;
            justify-content: center;
            background-color: black;

            svg {
              width: 30px;
              fill: white;
            }
          }

          &:nth-child(2) {
            grid-column: 2 / span 2;
            grid-row: 1;
            height: 90px;
            background-color: #2916e0;
          }

          &:nth-child(3) {
            align-self: end;
            grid-column: 1 / span 3;
            grid-row: 2/ 2;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            width: 270px;
            margin-bottom: -5vh;

            ul {
              text-align: center;

              li {
                list-style: none;
                margin-bottom: 25%;
                transition: all 0.5s;

                a {
                  list-style: none;
                  font-size: 30px;
                  font-weight: 600;
                  color: #b2b2b2;
                }

                &:hover a {
                  color: #2916e0;
                }
              }

              .azul a {
                color: #2916e0;
              }
            }
          }

          &:last-child {
            grid-column: 1 / span 3;
            grid-row: 3;
            align-self: flex-end;
            flex-direction: column;
            align-items: center;
            margin-bottom: 5vh;

            #icons {
              width: 70%;
              justify-content: space-evenly;
              background-color: transparent;
              margin-bottom: 10px;

              svg {
                width: 18px;
                height: 18px;
                fill: #b2b2b2;
              }
            }

            p {
              text-align: center;
              font-weight: 500;
              line-height: 1.8;
              color: #636363;

              span {
                color: #b2b2b2;
              }
            }
          }
        }
      }
    }

    div:nth-child(2) {
      height: calc(100vh - 30px);
      display: inherit;
      flex-direction: inherit;
      align-items: center;
      justify-content: center;

      svg {
        width: 18px;
        height: 18px;
        fill: #636363;
        width: 18px;
        margin-bottom: 55%;
      }
    }
  }

  #blogBody {
    height: 360vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    &>div {
      width: 60%;

      &:first-child {
        margin-top: 2%;

        span {
          font-weight: 400;
          font-size: 13px;
          color: #252525;
        }

        h1 {
          margin-top: 2.5%;
          font-size: 36px;
          color: #252525;
          font-weight: 600;
        }
      }

      &:nth-child(2) {
        margin-top: 5%;
        height: 543px;
        background-image: url("assets/detailthumbnail.jpg");
        background-repeat: no-repeat;

        &::before {
          position: relative;
          content: 'People';
          font-size: 12px;
          color: #2916e0;
          padding: 4px 20px;
          background-color: white;
          letter-spacing: 2px;
          text-transform: uppercase;
          font-weight: 600;
          border-radius: 2px;
          top: 5%;
          left: 5%;
        }
      }

      &:nth-child(3) {
        margin-top: 2.5%;

        p {
          font-size: 15px;
          color: #636363;
          line-height: 1.8;
        }
      }

      &:nth-child(4) {
        margin-top: 2.5%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        height: 545px;

        div {
          background-repeat: no-repeat;
          background-size: 100% 100%;

          &:first-child {
            grid-row: span 2;
            background-image: url("assets/detail1.jpg");
          }

          &:nth-child(2) {
            background-image: url("assets/detail2.jpg");
          }

          &:nth-child(3) {
            grid-column: span 2;
            background-image: url("assets/detail3.jpg");
          }

          &:nth-child(4) {
            grid-column: span 2;
            background-image: url("assets/detail4.jpg");
          }

          &:last-child {
            background-image: url("assets/detail5.jpg");
          }
        }
      }

      &:nth-child(5) {
        margin-top: 2.5%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        div {
          &:first-child {
            justify-self: start;

            span {
              font-size: 12px;
              color: #2916e0;
              padding: 4px 20px;
              background-color: #EBEBEB;
              letter-spacing: 2px;
              text-transform: uppercase;
              font-weight: 600;
              border-radius: 2px;
              transition: all .5s;
              margin-right: 3%;

              &:hover {
                background-color: #2916e0;
                color: white;
              }
            }
          }

          &:last-child {
            justify-self: end;
            color: #252525;
            font-size: 16px;
            margin-right: 20px;
            display: flex;
            align-items: center;

            #icons {
              margin-left: 2%;
              display: inherit;

              div {
                display: inherit;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                background-color: #EBEBEB;
                border-radius: 50%;

                svg {
                  width: 14px;
                  height: 14px;
                  fill: #2916e0;
                }
              }
            }
          }
        }
      }

      &:nth-child(6) {
        margin-top: 2%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: 236px;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          background-repeat: no-repeat;

          p {
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            max-width: 350px;
          }

          &:first-child {
            background-image: url("assets/detailblog-prev.jpg");
          }

          &:last-child {
            background-image: url("assets/detailblog-next.jpg");
          }
        }
      }

      &:nth-child(7) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 66px 250px;
        gap: 10px;
        margin-top: 2.5%;

        h1 {
          grid-column: span 3;
          color: #252525;
          font-size: 30px;
          font-weight: 600;
          margin-bottom: 3%;
        }

        div {
          grid-column: span 1;
          display: grid;
          grid-template-rows: repeat(2, 1fr);

          &>span {
            position: relative;
            width: min-content;
            height: min-content;
            font-size: 12px;
            color: #2916e0;
            padding: 4px 20px;
            background-color: white;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 600;
            border-radius: 2px;
            top: 25%;
            left: 5%;
          }

          p {
            align-self: flex-end;
            justify-self: center;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 7%;

            span {
              font-size: 13px;
              font-weight: 400;
            }
          }
        }

        #div1 {
          background-image: url("assets/blog6.jpg");
        }

        #div2 {
          background-image: url("assets/blog4.jpg");
        }

        #div3 {
          background-image: url("assets/blog3.jpg");
        }
      }

      &:nth-child(8) {
        margin-top: 2.5%;

        h1 {
          font-size: 30px;
          font-weight: 600;
          color: #252525;
          margin-bottom: 3%;
        }

        img {
          border-radius: 50%;
          width: 70px;
          height: 70px;
        }

        #div1,
        #div2 {
          display: grid;
          grid-template-columns: 10% 90%;
          height: min-content;

          &>div {
            &:first-child {
              margin-right: 20%;
            }

            &:last-child {
              span {
                color: #b2b2b2;
                font-size: 12px;
                font-weight: 400;
                line-height: 1.5;
                letter-spacing: 2px;
              }

              h1 {
                color: #252525;
                font-size: 18px;
                font-weight: 600;
              }

              p {
                color: #636363;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
              }

              .button {
                display: flex;
                align-items: start;
                height: min-content;
                margin-bottom: 4%;

                a {
                  font-size: 11px;
                  text-transform: uppercase;
                  color: #242d2e;
                  border: 1px solid #e5e5e5;
                  padding: 5px 22px;
                  font-weight: 600;
                  border-radius: 40px;
                  transition: all 0.3s;

                  &:hover {
                    background-color: #2916e0;
                    color: white;
                  }
                }
              }

              &>div {
                display: grid;
                grid-template-columns: 10% 90%;
                height: 160px;

                div:first-child {
                  margin-right: 20%;
                }
              }
            }
          }
        }
      }

      &:last-child {
        h1 {
          font-size: 30px;
          color: #252525;
          font-weight: 600;
        }

        div {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-bottom: 3%;

          input {
            border: 1px solid #e5e5e5;
            height: 50px;
            width: 33%;
          }

          textarea {
            width: 100%;
            height: 116px;
            border: 1px solid #e5e5e5;
          }
        }

        input[type="button"] {
          font-size: 14px;
          color: #fff;
          text-transform: uppercase;
          font-weight: 500;
          background: #2916e0;
          border: none;
          padding: 13px 37px 12px;
          border-radius: 50px;
        }
      }
    }
  }
}