@import url('./style.css');

@media (min-width: 1920px) {
  body {
    font-size: 26px;

  }

  main .article .learn-more {
    width: 13rem;
    padding: 1.5rem;
  }

  main .clients {
    justify-content: space-evenly;
  }

  footer {
    margin: 35px 0;
  }
}

@media (max-width: 1400px) {

  main {
    width: calc(100% - 4rem);
    height: calc(90vh - 4rem);

  }

  main .paragraph {
    padding: 2rem 2rem 2rem 0;
  }
}

@media (max-width: 1280px) {
  header {
    padding: 0 2rem;
  }

  main {
    padding-left: calc(2rem + 84px + 3rem);
    gap: 3rem;
    padding-top: 0;
  }

  main h1 {
    font-size: 3em;
  }

  main .paragraph {
    padding: 1rem 1rem 1rem 0;
  }

}

@media (max-width: 1150px) {
  header {
    padding: 0 1rem;
  }

  main {
    padding-left: calc(1rem + 84px + 1rem);
    gap: 3rem;
    padding-top: 0;
  }
}

@media (max-width: 950px) {

  header {
    height: 13vh;
  }


  header nav ul {
    gap: 2.3rem;
  }

  header .login-register .login {
    margin-right: .5rem;
  }

  main {
    flex-direction: column-reverse;
    height: auto;
  }

  main h1 {
    font-size: 2.5em;
  }

  main .hero-content img {
    width: 80%;
  }

  main section {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  main .clients {
    position: relative;
    margin: 1rem 0;
    justify-content: space-evenly;
  }
}

/*tratamento de erro não mexer!*/
@media (min-width: 701px) {

  header nav ul .dropdown:hover .list {
    padding: 1rem;

    height: auto;
    opacity: 1;
  }

  header nav ul .dropdown:hover .d1,
  header nav ul .dropdown:hover .d2 {
    background: url(../images/icon-arrow-up.svg) no-repeat;
    background-position: 100%;

  }
}
/*tratamento de erro não mexer*/

@media (max-width: 701px) {

  header {
    align-items: center;
    justify-content: space-between;
  }

  header nav.active {
    opacity: 1;
    pointer-events: all;
    display: block;
    width: 240px;
    padding: 4rem 1rem 0 1rem;
  
    animation: show .5s;
  }
  
  header nav.noshow {
    display: block;
    pointer-events: none;
    padding: 4rem 1rem 0 1rem;
  
    animation: exit .5s;
  }

  header nav {
    opacity: 0;
    pointer-events: none;
    box-shadow: 0px -5px 15px rgb(0 0 0 / 20%);

    display: block;
    position: absolute;
    right: 0;
    top: 0;
    
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--almost-white);
  }


  header nav ul {
    gap: 0;
    flex-direction: column;
    justify-content: flex-start;
    white-space: nowrap;
  }

  header nav ul .dropdown .d1,
  .d2 {
    width: 100%;
  }

  header nav ul .dropdown:hover .list {
    position: inherit;
  }

  header nav ul .dropdown .list {
    pointer-events: none;
    opacity: 0;
    height: 0;
    padding: 0;
    
    box-shadow: none;
    background: var(--almost-white);
    transition: all .3s ease;
  }

  header nav ul .dropdown.show .list {
    padding: 0 0 1rem 1rem;
    height: auto;
    opacity: 1;
    position: inherit;
  }

  header nav ul .dropdown .d1,
  header nav ul .dropdown .d2 {
    background: url(../images/icon-arrow-down.svg) no-repeat;
    background-position: 36%;
  }

  header nav ul .dropdown.show .d1,
  header nav ul .dropdown.show .d2 {
    background: url(../images/icon-arrow-up.svg) no-repeat;
    background-position: 36%;
  }

  header nav ul .dropdown .list a {
    padding: .5rem 0;

  }

  header nav ul li {
    text-align: left;
    margin: .7rem 0;
  }

  .login-register {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  header .login-register .register {
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px solid var(--almost-black)
  }

  header .menu {
    display: block;
  }

  main {
    padding: 0;
    width: 100%;
  }

  main .paragraph {
    padding: 1rem;
  }

  main h1 {
    font-size: 2em;
  }

  main .article, main .clients {
    position: inherit;

  }

}

@media (max-width: 425px) {
  header {
    height: 10vh;
  }

  main {
    padding: 0;
    width: 100%;
  }

  main h1 {
    font-size: 1.7em;
  }

  main .article p {
    font-size: .9em;
  }

  main .paragraph {
    padding: 1rem 1rem 2rem;
  }

  main .article .learn-more {
    padding: 1rem;
    font-size: .9em;
  }

  main .hero-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  main .clients {
    flex-wrap: wrap;
    row-gap: 1rem;
  }

  footer {
    flex-wrap: nowrap;
    margin: 0;
  }

}

/*Active aside*/

body.active {
  overflow-y: hidden;
}

/*ASIDE*/

@keyframes show {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    opacity: 1;
    width: 240px;
  }
}

@keyframes exit {
  from {
    opacity: 1;
    width: 240px;
  }

  to {
    opacity: 1;
    width: 0;

  }
}