body{
    background: url(assets/images/bg-main2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: rgb(252, 226, 226);
}
.fade-in-element {
    opacity: 0;
    transition: 3s; /* Transition over 1 second */
    transform: translateY(100px);
  }
  
  .fade-in-element.show {
    opacity: 1;
    transform: translateY(0);
  }
  
/*=== All contact header styles are below and within ===*/
header button::before,
header button::after{
    content: "";
    display: block;
    background-color: white;
    width: 2.1rem;
    height: 0.2rem;
    transition: transform 0.3s;
}
header button::after{
    width: 1.8rem;
}
header button .toggle-bar{
    height: 0.2rem;
    margin: .4rem 0;
    transition: transform 0.3s;
}
header input:checked ~ button .toggle-bar{
    transform: scale(0);
}
header input:checked ~ button::before{
    width: 2rem;
    transform: rotate(-45deg) translate(-5px, 10px);
   
}
header input:checked ~ button::after{
    transform: rotate(45deg) translate(-5px, -10px);
    width: 2rem;
}
header nav {
    transform: translateX(100%);
    transition: all 1s;
   
}
header input:checked ~ nav{
    display: block;
    transform: translateX(0%);
    transition: all 1s;
    z-index: 10;
    
}
header nav ul li{
    border-bottom: 1px solid transparent;
    padding: .2rem 0;
    transition: .5s;
}
header nav ul li:nth-child(5){
    border-bottom: 1px solid white;
}
header nav ul li:hover{
    border-bottom: 1px solid white;
}
main form label{
    visibility: hidden;
}
@media only screen and (min-width: 768px){
    header nav {
        transform: translateX(0%);
        transition: all 1s; 
        
    }
    header nav ul li{
        border: 1px solid transparent;
        padding: .2rem 1rem;
    }
}
/*=== All contact header styles are above and within ===*/

main form button{
    min-width: 18rem;
}

/*=== All contact form styles are below and within ===*/
main form input,
main form textarea{
    border: 1.5px solid #D70018;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;
    padding: .2rem 1rem; 

}

main form input{
    height: 3rem;
} 
/*=== All contact form styles are above and within ===*/

/*=== All contact footer styles are below and within ===*/
footer .center article li{
    border-bottom: 2px solid transparent;
    width: fit-content;
    transition: border 0.5s;
}
footer .center article li:hover{
    border-bottom: 2px solid white;
}
footer .socials ul li{
    width: 30px;
    height: 30px;
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border 0.5s;
}
footer .socials ul li:hover{
    border: 2px solid white;
}
/*=== All contact footer styles are above and within ===*/