.btn {
border: 2px solid black;
background-color: white;
color: black;
padding: 5px 5px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
}

.youtube {
border-color: #c20000;
color: rgb(185, 0, 0);

background-color: #0000008c;
}

.youtube:hover {
background-color: #ff0909;
color: white;
}

.amazon {
border-color: #418ce8;
color: #418ce8;

background-color: #0000008c;
}

.amazon:hover {
background-color: #418ce8;
color: white;
}


body{
  background: rgb(112, 111, 111);
  max-width: 100%;
  overflow-x: hidden;
  margin-left: 0px;
}
.carousel carousel-dark slide{
  background-size: 80%;
  background-color: (255, 178, 115, 0.721);
  width: 100%;
}
button.carousel-control-next{
position:relative;
top: -232px;
left: 1200px;
}
button.carousel-control-prev{
position:relative;
top: -200px;
}
.carousel-item {
height:25rem;
background:#777;
color:white;
position:relative;
background-position:center;
background-size:100%;
padding-top: 10px;
}
.container {
position: absolute;
bottom: 0;
right: -25px;
padding-bottom: 10px;
border-width: 20px;
}
.carousel-indicators.li{
background-color: white;
}
.overlay-image{
position: absolute;
bottom: 0;
right: 0;
left: 0;
top:0;
background-position:center;
background-size:cover;
}
.nav-item{
color: white;
}
.new-feature{
border: 2px solid #db1b1b;
color:white;

background: red;
margin-block: 20px;
}
.featured{
border: 2px solid #db1b1b;
color:white;
margin-left: calc((100% - min(40%, 70.5rem))/2);
}                
.content-btn{
  position: relative;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  width: 90%;
  text-transform: capitalize;

} 
.content-container{

  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-left: 20px;  
  padding-right: 20px;
  height: 300px;
  overflow-y: hidden;
  
}
.content-container-w{

display: flex;
overflow-x: auto;
scroll-behavior: smooth;
padding-left: 20px;  
padding-right: 20px;
height: 215px;
overflow-y: hidden;

}
.content-container-w::-webkit-scrollbar{
  display: none;
}

.content-container-wa{

display: flex;
overflow-x: auto;
scroll-behavior: smooth;
padding-left: 20px;  
padding-right: 20px;
height: 215px;
overflow-y: hidden;
margin-bottom: -.5%;

}
.content-container-wa::-webkit-scrollbar{
  display: none;
}
.content-container::-webkit-scrollbar{
  display: none;
  color: #f2f2f2;
}
.content-container::-webkit-scrollbar-button:single-button {
background-color: rgb(64, 64, 64);

display: block;
background-size: 10px;
background-repeat: no-repeat;
}
.content-container-wa::-webkit-scrollbar-button:single-button {
background-color: rgb(197, 0, 0);
display: block;
background-size: 10px;
background-repeat: no-repeat;
}

.content-card{
  flex: 0 0 auto;
  border-color: black;
  height: 150px;
  margin-right: 20px;

}

.content-card-a{
  flex: 0 0 auto;
  border-color: black;
  height: 150px;
  margin-right: 20px;

}
.content-card img{
  border-radius: 1px;
}
.content-title{
  white-space: normal;
  font-weight: bold;
  text-align: center;
  color: rgb(255, 255, 255);
  font-family:Arial, Helvetica, sans-serif;
}
.content-title-na{
  white-space: normal;
  font-weight: lighter;
  text-align: justify;
  color: white;
  font-family: sans-serif;
  font-size: 14px;
  margin-top: 10%;

}
.content img{
  border-radius: 5px;
}
.content-image{
  position: relative;
  width: 100%;
  height: 150;
  overflow: hidden;
  border-radius: 1px;
  border-color: black;
  border-width: thin;
  
  
}
.content-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.card-btn{
  position: absolute;
  bottom: 0px;
  top: 0px;
  left: 0px;
  right: 0px;
  transform: trnaslateX(-50%);
  padding: 0px;
  width: 95%;
  text-transform: capitalize;
  border: none;
  outline: none;
  background: rgba(106, 105, 105, 0);
  background-color: #77777700;
  border-radius: 0px;
  border-color: rgba(240, 248, 255, 0);
  transition: 0.5s;
  cursor: pointer;
  opacity: 0.7;
  

}
.content-card:hover.card-btn{
  opacity: 1;
}
.card-btn:hover{
  background: rgb(145, 169, 129);
  color: white;
  cursor: pointer;
}                
.content-info{
  width: 100%;
  height: 100%;
  padding-top: 10px;

}
.short-description{
  width: 100%;
  height: 0px;
  line-height: 0px;
  overflow: hidden;
  opacity: 0.5;
  text-transform: capitalize;
  margin: 5px 0;
}
.content{
  background-color: #927bb397

}
.content-category{
  color:#777;
  padding-left: 30px;
  border-bottom: solid;
}        

.content-container .pre-btn{
  border-color: #77777700;
  position: absolute;
  bottom: -52%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4%;
  height:35%;
  z-index: 10;
  background-color: #77777700;
  

}
.content-container .nxt-btn{
  border-color: #77777700;
  position: absolute;
  bottom: -52%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4%;
  height:35%;
  z-index: 10;
  background-color: #77777700;
}

.pre-btn{
  left: 4%;
  transform: rotate(180deg);
 
}
.nxt-btn{
  right: 3.3%;
}
.pre-btn img,
.nxt-btn img {
  opacity: 0.2;
}
.pre-btn:hover,
.nxt-btn:hover{
  opacity: 1;
  background-color: rgba(252, 221, 181, 0);
  color: aliceblue;
  
}

.content-container:hover .pre-btn img,
.content-container:hover .nxt-btn img{
  opacity: 1;
  background-color: rgba(255, 255, 255, 0);
  color: rgb(255, 255, 255);
  filter: invert(1);
}

.content-container-w .pre-btn-w{
  border-color: #77777700;
  position: absolute;
  bottom: -15%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4%;
  height:30%;
  z-index: 10;
  background-color: #77777700;
  

}
.content-container-w .nxt-btn-w{
  border-color: #77777700;
  position: absolute;
  bottom: -15%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4%;
  height:30%;
  z-index: 10;
  background-color: #77777700;
}

.pre-btn-w{
  left: 4%;
  transform: rotate(180deg);
}


.nxt-btn-w{
  right: 3.3%;
}

.pre-btn-w img,
.nxt-btn-w img {
  opacity: 0.2;
  
}
.content-container-w:hover .pre-btn-w img,
.content-container-w:hover .nxt-btn-w img{
  opacity: 1;
  background-color: rgba(255, 255, 255, 0);
  color: rgb(255, 255, 255);
  filter: invert(1);
}

.pre-btn-w:hover img,
.nxt-btn-w:hover img{
  opacity: 1;
  background-color: rgba(252, 221, 181, 0);
  color: aliceblue;
}

.content-container-wa .pre-btn-wa{
  position: absolute;
  color: #ddd;
  background-color:#000000;
   
  height:50px;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  width:50px;
  bottom: 15%;
  z-index: 10;
  background-color: #0000006b;
  left:0.5%;
  justify-content: center;
  align-items: center;
  display: flex;
  filter: invert();

}
.content-container-wa .nxt-btn-wa{
  position: absolute;
  color: #ddd;
  background-color:#000000;
      
  height:50px;
  border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  width:50px;
  bottom: 15%;
  z-index: 10;
  background-color: #0000006b;
  right:0%;
  justify-content: center;
  align-items: center;
  display: flex;
  filter: invert();
}

.pre-btn-wa{
  left: 0%;
  transform: rotate(180deg);
}

.nxt-btn-wa{
  right: 0%;
 
}

.pre-btn-wa img,
.nxt-btn-wa img {
  opacity: 1;
  filter: invert();
  filter: hue-rotate(5);
  border: 1px solid rgb(0, 0, 0);    
  height: 50px;
  border-radius: 50%;
  -moz-border-radius:50%;
  -webkit-border-radius: 50%;
  width: 50px;
}
.content-container-wa:hover .pre-btn-wa img,
.content-container-wa:hover .nxt-btn-wa img{
  opacity: 1;
  background-color: rgba(255, 255, 255, 0);
  color: rgb(249, 249, 249);
  
}

.pre-btn-wa:hover img,
.nxt-btn-wa:hover img{
  opacity: 1;
  background-color: rgba(252, 221, 181, 0);
  color: rgb(255, 255, 255);
}

.collection-container{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,lfr);
  grid-gap: 1rem;
}
.collection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collection p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
  color: white;
  font-size: 50px;
  text-transform: capitalize;
}
.collection:nth-child(3){
  grid-column: span 2;
  margin-bottom: 10px;
}
.hover-button{
  background-color: black;
  opacity: 100%;
}
.title-block {
color: white;
font-size: 18px;
position: absolute;
top: 90px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-weight: bold;
padding-bottom: 50px; 
margin-top: 60px;
width: 90%;
}

.title-block-w {
color: white;
font-size: 18px;
position: absolute;
top: 60px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-weight: bold;
}
.language-w{
color: white;
font-size: 11.5px;
position: relative;
top: 50px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-weight: normal;
}
.Genre-w {
color: white;
font-size: 12.5px;
position: relative;
top: 60px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-weight: normal;
}
.links-w {
color: white;
font-size: 12.5px;
position: relative;
top: 30px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-weight: normal;
}

.overlay {
position: absolute;
display:flex;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(106, 106, 106, 0.82);}


.content-card:hover .overlay{
opacity: 1;
}
.language {
color: white;
font-size: 11.5px;
position: relative;
top: 50px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-weight: normal;
margin-top: 10px;
margin-bottom: 0px;
width: 60%;

}
.Genre {
color: white;
font-size: 12.5px;
position: relative;
top: 60px;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-weight: normal;
margin-top: 20px; 
margin-bottom: 20px;
}
.links {
color: white;
font-size: 12.5px;
position: relative;
top: 50px;
left: 50%;
font-weight: bold;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-weight: normal;

}
.wrapper {
width: 1300px;
margin-left: 4%;
border-color: black;
border-radius: 1300px;
}
.content-category{
font-size: medium;
color: black;
}
.content-container-wa .content-card-a a{

text-decoration:none;
text-align: center;
}
.content-container-wa .content-card-a a:hover{
filter: brightness(1.25);
text-decoration: underline;
text-decoration-color: #fffffffa;
}

.content-container-wa .content-card a{

    text-decoration:none;
    text-align: center;
    }
    .content-container-wa .content-card a:hover{
    filter: brightness(1.25);
    text-decoration: underline;
    text-decoration-color: #fffffffa;
    }
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
top: 400px;
margin-left: 4.0%;
margin-top: -4.5%;
}

/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Add a color to the active/current link */
.topnav .filter-btn.active {
background-color: 	#241934;
color: rgb(255, 255, 255);
}
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}

.grid-container {
width: 100%;

display: flex;
flex-wrap: wrap;
padding-bottom: 10%;
margin-bottom: 10%;
padding-left: 1%;
padding-top: 1%;
align-self: center;

}

.grid-container .content-card{
padding-bottom: 22%;


}