/* General */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  scroll-behavior: smooth;
}
@font-face {
  font-family: 'Epilogue';
  src: url(./assets/fonts/Epilogue-VariableFont_wght.ttf);
}
/* Colors Variables */
:root {
  --Almost-White: hsl(0, 0%, 98%);
  --Medium-Gray: hsl(0, 0%, 41%);
  --Almost-Black: hsl(0, 0%, 8%);
}
html {
  overflow-x: hidden;
}
/* Body */
body {
  background-color: var(--Almost-White);
  color: var(--Medium-Gray);
  font-family: 'Epilogue';
  font-size: 1.125rem;
}
/*Button Box*/
button {
  display: flex;
  align-items: center;
  background-color: var(--Almost-White);
  color: var(--Medium-Gray);
  font-family: 'Epilogue';
  font-size: medium;
  font-weight: 500;
  border: none;
  cursor: pointer;
  & img {
    margin-left: 1rem;
  }
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 1rem 1.5rem;
  font-size: medium;
  & .menu_Icon {
    /* display: none; */
    cursor: pointer;
  }
  & nav {
    display: none;
    & .modal_Menu {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: var(--Medium-Gray);
      font-weight: 500;
      opacity: 0.7;
    }
    & .menu_Container {
      position: absolute;
      width: 15rem;
      height: 100%;
      top: 0;
      right: 0;
      background-color: var(--Almost-White);
      padding: 1.25rem 1.5rem 1.25rem;
      & .closeMenu_Container {
        margin-bottom: 1.25rem;
        text-align: end;
        cursor: pointer;
      }
      & .button_Box {
        display: grid;
        position: absolute;
        justify-content: center;
        bottom: 2rem;
        gap: .1rem;
        & .login_Button {
          justify-content: center;
          width: 12.2rem;
          height: 2.6rem;
          font-size: medium;
          border-radius: .9rem;
          &:hover {
            font-weight: 600;
          }
        }
        & .register_Button {
          justify-content: center;
          width: 12.2rem;
          height: 2.6rem;
          font-size: medium;
          border: 2px solid var(--Medium-Gray);
          border-radius: .9rem;
          &:hover {
            font-weight: 600;
          }
        }
      }
      & .menu_Content li {
        margin-top: 1.38rem;
        margin-bottom: 1.38rem;
        & .arrow_Up {
          display: none;
        }
        & .subMenu_Content {
          display: none;
        }
        & .subMenu_Content li {
          margin-bottom: 1.38rem;
          padding: 0 1.6rem;
          & img {
            margin-right: .7rem;
          }
          & li {
            cursor: pointer;
          }
        }
      }
    }
  }
}
main {
  text-align: center;
  & .hero_Image {
    width: 100%;
    margin-bottom: 3rem;
  }
  & h1 {
    margin-bottom: 1.5rem;
    color: var(--Almost-Black);
    font-size: 2.24rem;
    font-weight: 800;
  }
  & .home_Section p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.7rem;
    
  }
  & .home_Button {
    justify-content: center;
    width: 8.8rem;
    height: 3rem;
    margin: 0 auto;
    background-color: var(--Almost-Black);
    color: var(--Almost-White);
    font-size: 1rem;
    font-weight: 500;
    border-radius: .8rem;
    &:hover {
      background-color: var(--Almost-White);
      color: var(--Almost-Black);
      font-weight: 700;
      border: 1px solid var(--Almost-Black);
    }
  }
  & .logo_Container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 4.6rem;
    padding: 1rem;
    & .data_Logo {
      width: 5.2rem;
    }
    & .audio_Logo {
      width: 3.4rem;
    }
    & .meet_Logo {
      width: 4rem;
    }
    & .maker_Logo {
      width: 4rem;
    }
  }
}
.attribution { 
  margin-bottom: 2rem;
  color: var(--Medium-Gray);
  text-align: center;
  font-size: .85rem; 
  font-weight: 500;
  & a { 
    color: rgb(226, 177, 43); 
    font-weight: 700;
  }
}

@media (min-width: 1024px) {
  header {
    width: 100%;
    height: 3rem;
    margin: 1.6rem 0 3.7rem 0;
    padding: 0 0 0 1.5rem;
    & .menu_Icon {
      display: none;
    }
    & nav {
      display: block;
      width: 100%;
      height: 100%;
      & .modal_Menu {
        display: none;
      }
      & .menu_Container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: static;
        width: 100%;
        height: 100%;
        & .closeMenu_Container {
          display: none;
        }
        & .button_Box {
          display: flex;
          justify-content: space-between;
          position: static;
          & .login_Button, .register_Button {
            width: 7.6rem;
            height: 2.9rem;
          }
        }
        & .menu_Content {
          display: flex;
          position: static;
          align-items: center;
          height: 100%;
          gap: 2.4rem;
          & li:nth-last-child(-n+2):hover {
            cursor: pointer;
            font-weight: 600;
          }
          & button {
            &:hover {
              font-weight: 600;
            }
          }
          & #subMenu_Features {
            position: absolute;
            width: 11.3rem;
            margin-top: 1rem;
            margin-left: -5rem;
            background-color: var(--Almost-White);
            border-radius: .8rem;
            box-shadow: 0 8px 40px hsl(0, 0%, 82%);

            & li {
              margin-left: .5rem;
              padding: 0 1.6rem 0 .8rem;
              &:hover {
                font-weight: 600;
              }
              & img {
                margin-left: .5rem;
              }
            }
          }
          & #subMenu_Company {
            position: absolute;
            width: 8rem;
            margin-top: 1rem;
            margin-left: .2rem;
            background-color: var(--Almost-White);
            
            border-radius: .8rem;
            box-shadow: 0 8px 40px hsl(0, 0%, 82%);
            & li {
              &:hover {
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
  main {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 1.5rem 0 1.5rem;
    gap: 4.6rem;
    & .home_Section {
      text-align: left;
      margin-top: 8.4rem;
      & h1 {
        width: 27rem;
        font-size: 4rem;
        margin-bottom: 2.6rem;
      }
      & p {
        margin-bottom: 2.6rem;
      }
      & .home_Button {
        width: 9.25rem;
        height: 3.25rem;
        margin-left:  0;
        margin-bottom: 3.8rem;
      }
      & .logo_Container {

        padding: 0 3.5rem 0 0;
        & .data_Logo {
          width: 6.375rem;
        }
        & .audio_Logo {
          width: 4.188rem;
        }
        & .meet_Logo {
          width: 5.063rem;
        }
        & .maker_Logo {
          width: 4.563rem;
        }
      }
    }
  }
}

@media (min-width: 1280px) {
  header {
    width: 74rem;
    margin: 0 auto;
    margin-top: 1.75rem;
    padding: 0;
    & nav {
      & .menu_Container {
        width: auto;
        margin: 0 0 0 2rem;
        & .button_Box {
          margin-right: -1.7rem;
        }
      }
    }
  }
  main {
    margin: 3.688rem 7.5rem 0 9.6rem;
  }
}

@media (min-width: 1440px) {
  header {
    width: 85rem;
  }
  main {
    justify-content: space-between;
    padding: 0;
    & .hero_Image {
      margin-top: 2rem;
      width: 30.125rem;
    }
    & .home_Section {
      & h1 {
        width: 34rem;
        font-size: 5rem;
        margin-bottom: 2.6rem;
      }
      & p {
        width: 26.25rem;
        margin-bottom: 4rem;
      }
      & .home_Button {
        margin-bottom: 6.8rem;
      }
      & .logo_Container {
        margin-bottom: 0;
      }
    }
  }
}



@media (min-width: 1920px) {
  header {
    width: 95rem;
    margin-bottom: 3.75rem;
  }
  main {
    max-width: 1280px;
    margin: 0 auto;
  }
}