body{
    margin:0px;
    padding: 0%;
    font-family: Titillium,sans-serif
    
}
/* nav */
body{
    font-family: Titillium,sans-serif
}
.search-form {
padding: 10px;
font-size: 10px;
border: 1px solid grey;
float: left;
/* width: 80%; */
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#search-btn{
float: right;
padding: 10px;
background:rgb(255, 104, 104);
color: white;
font-size: 10px;
border: 1px solid grey;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-left: none;
cursor: pointer;
}
#search-btn:hover{
background: red;
}

#logo{
width: 100%;
display: flex;
justify-content: space-between;
}
#logo>div:nth-child(1){
width: 30%;

}
#logo>div:nth-child(1) img{
width: 50%;
transition: 0.4s;
}
#logo>div:nth-child(1) img:hover{
transform: scale(1.1);
}
#logo>div:nth-child(2){
width: 50%;
margin-top: 30px;
}
#logo>div:nth-child(2) img{
width: 100%;
}
.menu-bar{
height: 50px;
background: rgb(245, 44, 44);
text-align: center;
}
.menu-bar>div{
display: flex;
align-items: flex-start;
}
.menu-bar ul{
display: inline-flex;
list-style: none;
}
.menu-bar ul li{
width: 120px;
font-weight: bold;
/* margin: 10px;
padding: 10px; */
}
.menu-bar ul li a{
text-decoration: none;
color: black;
}
.dropdown{
display: none;
margin-top: 15px;
position: absolute;
left: 10px;
width: 500px;
background-color: white;
}

.top-nav ul{
display: flex;
justify-content: space-evenly;
list-style: none;

}
.top-nav ul li{
font-weight: 10px;

}
.top-nav ul li a{
text-decoration: none;
color: rgb(104, 104, 104);
}
.top-nav ul li a:hover{
border-bottom: 10px solid red;
}
.menu-bar{
    margin-bottom: 20px;
}
.menu-bar ul li:hover .dropdown{
display: block;
display: flex;
position: relative;
/* background: green; */
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.menu-bar ul li:hover .dropdown ul{
display: block;
margin: 10px;
}
.menu-bar ul li:hover .dropdown ul li{
width: 150px;
padding: 10px;
border-bottom: 1px dotted;
text-align: left;
}
.menu-bar ul li:hover .dropdown ul li:last-child{
border-bottom: none;
}
.menu-bar ul li:hover .dropdown ul li a:hover{
color: red;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}

/* nav end */




.main{
    width:90%;
    /* height:4400px; */
    margin: auto;
    display:flex;
    /* margin-top:40px; */

    /* border:solid 1px black; */
}
.trending{
    width:18%;
    /* height:100px; */
    color:rgb(104, 98, 98);
    background-color:rgb(245, 242, 242);
    /* border:solid 1px red; */
}

.head > p{
    margin-left:8px;
    color: rgb(250, 54, 54);
}
.AUDIO{
    width:85%;
    margin-left:20px;
    padding:10px;
    background-color:rgb(245, 242, 242);
    /* border:solid 1px red; */
}

.img1 > div{
    width:50%;
    margin:auto;
    /* border:solid 1px red; */
}
.img1 > div > img{
    width:100%;
}
.img1 p{
    text-align: center;
}
.img1 p:hover,.AUDIO a:hover{
    color: red;
    cursor: pointer;
}
.head{
    text-align: center;
}
#AUDIO2{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    width:100%;
    /* height:1700px; */
    /* border:solid 1px green; */
}
.AUDIO_h3{
    color:rgb(86, 86, 86);
}
.card{
    width:88%;
    margin: auto;
    height:400px;
    padding:10px;
    margin: auto;
    margin-top:20px;
    /* text-align: center; */
    box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    background-color:white;
    border-radius:10px;
    /* border:solid 1px red; */
}
.cardImg{
    width:100%;
    height:170px;
    margin: auto;
    /* border:solid 1px rgb(22, 21, 21); */
}
.card img{
    width:100%;
    height:170px;
}
.Add{
    display: block;
    margin: auto;
    border:0px;
    height:40px;
    color:black;
    background-color:rgb(52, 178, 227);
    border-radius:10px;
}
.Add:hover{
    cursor: pointer;
    background-color:skyblue;
}
.price{
    color:red;
}
.description{
    color:rgb(116, 113, 113);
}
.filterAUDIO{
    display: flex;
    justify-content: space-between;
}
#filter{
    width:100%;
    margin-top:20px;
    border:0px;
    height:40px;
    text-align: center;
    border-radius:10px;
    background-color:gray;
    color:white;
}
#filter:hover{
    cursor: pointer;
    background-color:rgb(147, 144, 144);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.card:hover{
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.description:hover{
    cursor: pointer;
   color:red;
}
.FEATURES{
    /* border:1px solid red; */
    display:grid;
    grid-template-columns:repeat(3,1fr);
    width:95%;
    margin: auto;
    height:590px;
   
    margin-top:20px;
}
.FEATURES > div{
    width:90%;
    /* height:100px; */
    padding:5px;
    margin: auto;
    background-color:rgb(221, 220, 220);
}
.FEATURES > div >div{
    
    width:80%;
    padding:5px;
    margin: auto;
    background-color:white;
}
.FEATURES > div >div img{
    width:100%;
}
.FEATURES > div > p{
    margin-left:20px;
    color:rgb(73, 72, 72);
}
.more{
  margin-left:85%;
}
.more:hover{
    cursor: pointer;
    color:red;
}
.AUDIO_h3{
    margin-left:4%;
}
.GUIDES{
    /* border:1px solid red; */
    width:95%;
    margin: auto;
    height:300px;
    margin-top:40px;
    padding:10px;
    background-color: rgb(69, 67, 67);
}
.GUIDES_h3{
   margin-left:4%;
   
   color:white;
}
.inner{
    /* border:1px solid red; */
    width:95%;
    margin: auto;
    height:270px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin-top:20px;
   
}
.inner > div{
    /* border:1px solid red; */
    width:95%;
    height:230px;
    margin: auto;
}

.inner > div p {
    color: white;
    text-align: center;
}
.inner > div > div{
    border:1px solid white;
    width:84%;
    height:140px;
    padding:2px;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;
    margin-top:7px;
  
}
.inner > div > div img{
    width:100%;
}
.last{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    width:100%;
    margin: auto;
    height:280px;
    /* border:solid 1px red; */
}
.last > div{
    width:70%;
    height:250px;
    margin: auto;
    text-align: center;
    /* height:300px; */
    /* border:solid 1px red; */
}
.last > div p{
    margin-left:20px;
    margin-right:20px;
}
.last > div > div{
    width:95%;
    /* height:150px; */
    padding:5px;
    margin: auto;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    /* height:300px; */
    /* border:solid 1px red; */
}
.last > div > div img{
    width:100%;
    /* height:150px; */
    margin-top:3px;
}
.AUDIO2{
    width:92%;
    color: gray;
    margin: auto;
    margin-top:10%;
   
}
hr{
    margin-left:10px;
    margin-right:10px;
}
.img1  p{
    font-size:13px;
    color: rgb(91, 90, 90);
}

.last > div p:hover{
    cursor: pointer;
    color: red;
}

/* footer */
#foot {
    display: flex;
    background-color: #414347;
    gap: 150px;
}
#first_div{
    gap: 100px;
    padding-left: 40px;
    display: flex;
    background-color: #414347;
}
h4{
    font-family: titillium, sans-serif;
    font-size: 15px;
}
/* #logo_div{
    height: 62px;
    width: 100px;
} */
#image{
    

    width: 150px;
    height: 40px;
}
#image1, #image2, #image3{
    width: 112px;
}