*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, Georgia;
}
body
{
    background-image: url("https://cdn.pixabay.com/photo/2021/09/01/10/43/music-6591030_1280.jpg");
}
.head
{
padding: 10px;
letter-spacing: 1px;
}
.main
{
position: absolute;
}
.main-nav
{
float: left;
list-style-type: none;
margin-top: 25px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
text-decoration: none;
color: rgb(7, 6, 12) ;
font: bold;
padding: 4px 8px;
border: 1px solid transparent;
transition: 0.6s ease;
margin: 5px;
}
.main-nav li a:hover
{
background-color:  rgb(242, 194, 163);
color: rgb(7, 6, 12);
font :bold;
}
.main-nav li.active a
{
background-color: rgb(209, 154, 115);
color: #000;
font: bold;
}
.body
{
width: 95%;
height: 600px;
background: rgb(204, 176, 144);
display: flex ;
margin: 80px auto;
}
.right-side
{
display: flex;
float: left;
width: 50%;
padding: 20px;
height: 300px;
}
.right-side .about-img
{
position: absolute;
top: 175px;
left: 900px;
}
.left-side
{
display: flex;
float: left;
width: 30%;
padding: 20px;
height: 200px;
}
.left-side .about-img
{
position: absolute;
top: 270px;
left: 470px;
}

.about-img:hover
{
transform: scale(1.1);
background: #3d3f3f;
box-shadow: 2px 2px 2px #000;
z-index: 2;
}
.about-img::before
{
position: absolute;
content: '';
right: -30px;
top: 15px;
border: 10px solid rgba(31, 30, 30, 0.5);
width: 100%;
height: 100%;
}
.about-img img
{
height: 450px;
width: 100%;
}
.left-side
{
display: flex;
margin-top: 30px;
float: left;
width: 100%;
padding: 60px;
height: 400px;
}
.info h1
{
font-size: 40px;
margin-left: 35%;
}
.info h2
{
font-size: 25px;
margin-left: 40px;
margin-bottom: 25px;
margin-top: 25px;
}
.info h2 span
{
color: whitesmoke;
font-size: 35px;
}
.info p
{
line-height: 22px;
font-size: 20px;
margin-left: 40px;
margin-bottom: 25px;
}
.info a
{
text-decoration: none;
color: black;
margin-top: 10px;
}
.info a i
{
font-size: 1.5rem;
}
.container2
{
width: 80%;
height: auto;
padding: 10px;
margin: 80px auto;
display: flex ;
justify-content: center;
}
.box
{
width: 380px;
height: 500px;
background: rgb(204, 176, 144);
margin: 0px 10px;
transition: 1s;
}
.box:hover
{
transform: scale(1.1);
background: rgb(204, 176, 144);
box-shadow: 2px 2px 2px #000;
z-index: 2;
}
.box-img img
{height: 300px;
width: 300px;
background-size: cover;
background-position: center;
border-radius: 60px;
transform: translate(-50%,-50%);
position: relative;
margin-top: 40%;
margin-left: 50%;
}

.box-text
{
padding: 10px;
margin: 30px;
text-align: center;

}

.box-text h2
{
font-size: 20px;
margin-left: 25%;
margin-bottom: 30px;
color:black;
}

.box-text p
{
line-height: 22px;
font-size: 16px;
margin-left: 20px;
margin-bottom: 12px;
color:black;
}

.box-text a
{
background: rgb(97, 57, 43);
color: #ffffff;
padding: 20px 15px;
display: inline-block;
text-decoration: none;
text-transform: capitalize;
position: relative;
    left: 5px;
    top: -130px;
}
.box-text a:hover
{
background-color:rgb(80, 5, 18);
color: whitesmoke;
font :bold;}

footer
{
position: absolute;
top: 1600px;
background-image: url("https://cdn.pixabay.com/photo/2021/09/01/10/43/music-6591030_1280.jpg");
height:350px;
width: 100vw;
font-family: Arial, Helvetica, sans-serif;
padding: 40px;
}
.footer-content
{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content hr
{
width: 70%;
margin-left: auto;
margin-right: auto;
}
.footer-content h3
{
font-size: 2.0rem;
font-weight: 400;
text-transform: uppercase;

}
.socials
{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li
{
margin: 0 12px;
}
.socials a
{
text-decoration: none;
color: rgb(255, 255, 255);
}
.socials a i
{
font-size: 1.5rem;
transition: color .4s ease;
}
.socials a:hover i
{
color: rgb(139, 138, 139);
}
.foot_bottom
{
background: rgb(238, 117, 137);
width: 100vw;
padding: 5px;
text-align: center;
height: 50px;
position: absolute;
bottom: 10px;
left: 0;
}
.foot_bottom p
{
font-size: 16px;
word-spacing: 2px;
text-transform: capitalize;
}
.foot_bottom span
{
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
.waviy {
    position: relative;
    left: 5px;
    top: -150px;
  }
  .waviy span {
    position: relative;
    display: inline-block;
    font-size: 40px;
    color: #fff;
    text-transform: uppercase;
    animation: flip 2s infinite;
    animation-delay: calc(.2s * var(--i))
  }
  @keyframes flip {
    0%,80% {
      transform: rotateY(360deg) 
    }
  }