/* Estilização do home */


/* Mensagem de boas vindas*/
.wellcome-msg{
    padding-block: 100px;
    margin-bottom: 0;
  a{
    margin-left: 40%;
    /* text-align: center; */
    text-decoration: none;
    color: beige;
    font-size: 1.6rem;

    &:hover{
      text-decoration: underline;
      
    }
  }
}
.header-content{
    gap: 2rem;
    height: 100%;
    display: grid;
    margin: 0 auto;
    margin-top: 0;
  
    grid-template-columns: repeat(2, 1fr);
  
    .left-header{
        display: flex;
        height: 400px; 
        align-items: center;
        position: relative;
        transition: all .4s ease-in-out;
        border: 1px solid var(--color-grey1);
        margin-top: 6rem;
        z-index: -90px;
       
        &:hover{
          background-color: var(--color-grey4);
        }
        .h-shape{
            top: 0;
            left: 0;
            width: 68%;
            height: 100%;
            z-index: -10;
            position: absolute;
            background-color: var(--color-forth);
            transition: all .4s ease-in-out;
            clip-path: polygon(0 0, 46% 0, 79% 100%, 0% 100%);  
            &:hover{
              background-color: var(--color-secondary);
            }
        }

        .image{  
            height: 90%;
            width: 68%;
            margin-left: 2rem;
            border-radius: 14px;
            transition: all .4s ease-in-out;
            background-color: var(--color-black); 
          
        }
        img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%);
            transition: all .4s ease-in-out;
           
            &:hover{
                filter: grayscale(0);
            }
        }
    }
}


/* Lado direito */
.right-header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2rem;
  padding-top: 2rem;

}

.name{
  font-size: 1.9rem;
  color: var(--color-grey1);
  margin: 2rem 0 1rem 2rem;
}
.name span{
  color: var(--color-secondary);
  font-size: 2rem;
}

.name-parag{
  margin: 1rem;
  line-height: 1.8rem;
  font-size: 1.2rem;
  color: var(--color-grey1);
}

/* Botao */
.btn-con{
  display: flex;
  align-self: flex-start;
  margin: 20px 0 20px 0;
}
.main-btn{
  border-radius: 30px;
  color: inherit;
  font-weight: 700px;
  border: 2px solid var(--color-forth);
  display: flex;
  align-self: flex-start;
  position: relative;
  align-items: center;
  overflow: hidden;
  margin-bottom: 4rem;
  margin-left: 2rem;
  .btn-text{
    padding: 0 2rem;
  }
  .btn-icon{
    background-color: var(--color-grey0);
    display: flex;
    width: 30px;
    height: 30px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--color-white);
  }
  &::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(100%);
    transition: all .4s ease-in-out;
    z-index: -1;
  }
  &:hover{
    &::before{
      width: 100%;
      height: 100%;
      background-color: var(--color-forth);
      transform: translateX(0);
    }
  }
}

/* Media queries */
@media screen and (max-width: 600px) {

  .wellcome-msg{
    padding-block: 50px;

  }
  .wellcome-msg a{
    text-align: center;
    margin-left: 12.5%;
  }


    .right-header .name{
      font-size: 1rem;
      text-align: start;
    }

    .right-header p{
    line-height: 2.4rem;
    font-size: 1.1rem;
  }  

  .header-content{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    margin: 0;
    .left-header{
      margin-top: 2rem;
     
    }
    .h-shape{
      display: none;
    }
    .image{
      width: 100%;
      border: none;
      margin: 0 auto;
    }

  }
  .main-btn{
  margin-bottom: .6rem;
  margin-left: 4rem;
  }
  .right-header{
    padding-top: .5rem;
  }

  .name{
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: var(--color-grey0);
    /* margin: 2rem 0 1rem 2rem; */
  }
  .name span{
    color: var(--color-secondary);
    font-size: 1.6rem;
  }
  
  .name-parag{
    margin: 1rem 0 1rem 2rem;
    line-height: 1.8rem;
    font-size: 1.2rem;
    color: var(--color-grey1);
  }

  footer p{
    font-size: 1rem;
    margin-top: 2rem;
  }
}


@media screen and (min-width: 600px) and (max-width: 920px){

  .wellcome-msg{
    padding-block: 120px;
    margin-bottom: 0; 
  }

   h1{
      font-size: 2rem;
    } 

  .wellcome-msg a{
    font-size: 2rem;
    margin-left: 30%;
  }

  .header-container{
    padding: 0px;
    margin: 0px;
  }

  .right-header h1{
   color: var(--color-forth);
   text-align: start;
  }

  .right-header p{
    line-height: 2.4rem;
    font-size: 2rem;
  }  
}