*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font: 1em sans-serif;
}
header{
    background: hsl(319, 4%, 97%);
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 20px;
    padding-left: 60px;
    padding-right: 60px;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.nav-menu{
    display: flex;
    gap: 40px;
}
.nav-menu a{
    color: black;

}
.nav-menu a:hover{
border-bottom: 1px solid hsl(276, 81%, 62%);
transition:ease-out 0.4s;
}

.hamburger{
    display: none;
    cursor: pointer;
}
.bar{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0,3s ease-in-out;
    transition: all 0.3s ease-in-out;
   background-color: black;
}
.first-sec{
background: url(./img/love.avif) center center/contain no-repeat;
width: 100%;
height: 500px;
}
.first-sec p{
    font-size: 30px;
    padding: 20px;
    
}
.x{
    color: hsl(276, 81%, 62%);
    font-family: 'Courier New', Courier, monospace;
}
.second-sec{
    background-image: url(./img/bigup.avif);
    background-position: 40% 60%;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
height: 900px;
}
.second-sec h1 {
    color: white;
    font-size: 80px;
    padding: 2rem;
    text-align: center;
}
.second-sec p{
    color:hsl(276, 21%, 91%);
    padding: 2rem;
    line-height: 1.5rem;
    padding-top:60px;
}
.third-section{
    margin-top: 60px;
    margin-left: 20px;
    margin-right: 20px;
}
.third-section h2{
    font-size: 20px;
text-align: center;
font-weight: 400;
}
.third-sec{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.3rem;
    margin-top: 20px;
   
}
#acton{
    color: hsl(276, 81%, 62%);
}
.box {
    background-color: hsl(275, 81%, 6%);
    border-radius: 10px;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.4), -1px -3px 5px rgba(0, 0, 0, 0.4);
}
.box p {
    color: #fff;
    text-align: center;
}

.third-sec img {
    width: 100%;
    height: 250px;
}
.book {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px; 
}
.book a{
    color: white;
    background-color: black;
    border-radius: 4px;
    padding: 8px;
}
.book a:hover{
    background: none;
    color:hsl(275, 81%, 6%);
    border: 1px solid hsl(275, 81%, 6%);
}
.last-sec{
    display: flex;
    align-items:center ;
    justify-content: center;
    margin-top: 40px;
    
}
.last-sec a{
    padding-right: 6px;
}
footer{
    background: hsl(319, 4%, 97%);
}
.cont{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.cont ul{
    padding: 20px;
}
.cont li{
    padding-top: 10px;
}
.line {
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;

}
hr {
	flex: auto;
	border-width:0.2px;
	height: 100px;
	background-color:black;
}
footer a{
    color: #000;
    text-decoration: underline;
}
footer p{
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
}
@media(max-width:920px){
    .third-sec{
        grid-template-columns: 1fr 1fr;
    }
    .second-sec p{
        padding-top: 10px;
        /* padding-bottom: 20px; */
    }
}

@media(max-width:768px){
    .hamburger{
        display: block;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
        transform: translateY(-8px) rotate(-45deg);
    }
    .nav-menu{
position: fixed;
flex-direction: column;
background-color: hsl(319, 4%, 97%);
width: 100%;
text-align: center;
justify-content: center;
left: -100%;
top: 69px;
/* border: 1px solid gold; */
transition: ease-in-out 0.6s;
    }
.nav-item{
    margin: 16px 0;
    /* border-bottom: 1px solid hsl(276, 81%, 62%); */
}
.nav-link {
    /* border-bottom: */
}
.nav-menu.active{
    left: 0;
    
}
.third-sec{
    grid-template-columns: 1fr;
}
.second-sec p{
    display: none;
}
.cont{
    flex-direction: column;
    text-align: center;
}
hr{
    display: none;
}
.second-sec h1{
    font-size: 70px;
}
}