<style>



.records-container {
  display: flex;
  flex-wrap: wrap; 
  flex-direction: row; 
  align-items: center;
  margin-left:10%;
}

.record-row {
  width:300px;
  height:350px;
  background-color:white;
  text-align:center;
  border:1px solid #ddd;
}

.record-name {
  margin: 5px 10px 10px 10px;
  width:280px;
  text-align:left;
}

.image-container {
  margin: 10px 10px 0 10px;
  padding:5px;
height:205px;
}

img {
    max-width:300px;
    max-height:200px;

}

a{
   text-decoration:none;
   color:black;
}

a:hover {
    text-decoration: underline;
    cursor: pointer;
    color: #c45500;
}
.record-name {
    display: block;
    line-height: 1.2em;
    max-height: 3.6em;
    overflow: hidden;
    position: relative;
}

.record-name:hover::after {
    content: attr(title);
    position: absolute;
    background: #f9f9f9;
    padding: 10px;
    border: 1px solid #ddd;
    top: 100%;
    left: 0;
    white-space: nowrap;
    z-index: 1;
}
.record-rating {
    font-size: 0;
    white-space: nowrap;
    display: inline-block;
    width: 79px;
    height: 15px;
    overflow: hidden;
    position: relative;
    background: url('/assets/images/Star_1.png');
    background-size: contain;
}

.record-rating::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: var(--star-width, 0%);
    background: url('/assets/images/Star_2.png');
    background-size: contain;
}
.record-rating.rating-cover::before {
    background-size: cover !important;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.slider-container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background: #f5f5f8;
}

.slider-container1 {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background: #f5f5f8;
}


.slider-container2 {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background: #f5f5f8;
}

.slider {
	display: flex;
	transition: transform 0.5s ease-in-out;
	height: 100%;
}

.slide {
	min-width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide-meta {
	min-width: 49.8%;
	height: 580px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide-medium {
	min-width: 0.4%;
	height: 580px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide-pico {
	min-width: 49.8%;
	height: 580px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slide img {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 80%;
    object-fit: cover;
    opacity: 0.9;
}

.slide-content {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: gray;
	padding: 20px 40px;
	border-radius: 10px;
}

.slide-content-meta {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: gray;
	padding: 20px 40px;
	border-radius: 10px;
}

.slide-content-pico {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: gray;
	padding: 20px 40px;
	border-radius: 10px;
}


.slide-content-VisionProAccessories {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: gray;
	padding: 20px 10px;
	border-radius: 10px;
}

.slide-content-MetaQuestAccessories {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: gray;
	padding: 20px 0px;
	border-radius: 10px;
}


.slide-content-PicoAccessories {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: gray;
	padding: 20px 0px;
	border-radius: 10px;
}


.slide-title {
	font-size: 2.5rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-title-meta {
	font-size: 2rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-title-pico {
	font-size: 2rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-title-VisionProAccessories {
	font-size: 2rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-title-MetaQuestAccessories {
	font-size: 2rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.slide-title-PicoAccessories {
	font-size: 2rem;
	margin-bottom: 10px;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}


.slide-description {
	font-size: 1.2rem;
	max-width: 600px;
}


.slide-description-meta {
	font-size: 1.2rem;
	max-width: 900px;
}


.slide-description-pico {
	font-size: 1.2rem;
	max-width: 900px;
}


.nav-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #bbbbbb4d;
	color: white;
	padding: 15px 20px;
	border: none;
	cursor: pointer;
	font-size: 24px;
	transition: 0.3s;
	backdrop-filter: blur(5px);
}

.nav-button:hover {
	background: rgba(255,255,255,0.5);
}

.prev { left: 20px; }
.next { right: 20px; }


.pagination {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.pagination-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #9f9c9c80;
	cursor: pointer;
	transition: 0.3s;
}

.pagination-dot.active {
	background: #dbd5d580;
	transform: scale(1.3);
}
</style>
<style>

.dropdown {
	position: relative;
	display: inline-block;
	height:50px;
	width:5%;
	text-align:center;
}

.dropdown1 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown2 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown3 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown5 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown6 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown10 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}

.dropdown7 {
	position: relative;
	display: inline-block;
	height:50px;
	width:10%;
	text-align:center;
}


.dropbtn {
	background-color:#ffffff;
	color: #959595;
	font-size: 14px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;
	height:70%;
}


.dropbtn10 {

	color: #959595;
	font-size: 14px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;
	height:70%;
}


.dropbtn7 {
	background-color: #f5f5f8;
	color: #959595;
	font-size: 14px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;
	height:100%;
}



.dropdown-content {
	display: none;
	position: relative;
	width:100%;
	height:260px;
	top:auto;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}

.dropdown-content1 {
	display: none;
	position: relative;
	width:100%;
	height:406px;
	top:auto;
	left:-10px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}


.dropdown-content2 {
	display: none;
	position: relative;
	width:100%;
	height:406px;
	top:auto;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}



.dropdown-content3 {
	display: none;
	position: relative;
	width:100%;
	height:376px;
	top:auto;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}



.dropdown-content5 {
	display: none;
	position: fixed;
	width:100%;
	height:376px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	z-index: 1;
	overflow: hidden;
	text-align:left;
}



.dropdown-content6 {
	display: none;
	position: fixed;
	width:100%;
	height:106px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	
	
	
	z-index: 1;
	
	overflow: hidden;
	text-align:left;
}





.dropdown-content10 {
    display:none;
	position: fixed;
	width:100%;
	height:276px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	
	
	
	z-index: 1;
	
	overflow: hidden;
	text-align:left;
}


.quickLink:hover{
background-color:#e9e9e969;
}

.quickLink a:hover{
color:black;
}
.quickLink a{
   text-decoration:none;
   color:black;
}


.dropdown-content7 {
    display:none;
	position: fixed;
	width:100%;
	height:236px;
	top:47px;
	left:0px;
	background-color: #f5f5f8;
	min-width: 1500px;
	
	
	
	z-index: 1;
	
	overflow: hidden;
	text-align:left;
}






.dropdown-linkarea{

	width:100%;
	height:auto;
	top:65px;
	left:10.75%;
	background-color: #f5f5f8;
	z-index: 2;
}








.dropdown-content a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: flex;
	transition: background-color 0.3s;
}
.dropdown-content a:hover {
	background-color: #ddd;
}

.dropdown-content1 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content1 a:hover {
	background-color: #ddd;
}

.dropdown-content2 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content2 a:hover {
	background-color: #ddd;
}



.dropdown-content3 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content3 a:hover {
	background-color: #ddd;
}



.dropdown-content5 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content5 a:hover {
	background-color: #ddd;
}




.dropdown-content6 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content6 a:hover {
	background-color: #ddd;
}



.dropdown-content7 a {
	color: #333;
	padding: 7px 10px;
	width:500px;
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
}
.dropdown-content7 a:hover {
	background-color: #ddd;
}




.dropdown:hover .dropdown-content,
.dropdown:hover .dropdown-otherarea {
    display: block;
}
.dropdown.hide-menus .dropdown-content,
.dropdown.hide-menus .dropdown-otherarea {
    display: none;
}

.dropdown1:hover .dropdown-content1,
.dropdown1:hover .dropdown-otherarea1 {
    display: block;
}
.dropdown1.hide-menus1 .dropdown-content1,
.dropdown1.hide-menus1 .dropdown-otherarea1 {
    display: none;
}

.dropdown2:hover .dropdown-content2,
.dropdown2:hover .dropdown-otherarea2 {
    display: block;
}
.dropdown2.hide-menus2 .dropdown-content2,
.dropdown2.hide-menus2 .dropdown-otherarea2 {
    display: none;
}


.dropdown3:hover .dropdown-content3,
.dropdown3:hover .dropdown-otherarea3 {
    display: block;
}
.dropdown3.hide-menus3 .dropdown-content3,
.dropdown3.hide-menus3 .dropdown-otherarea3 {
    display: none;
}


.dropdown5:hover .dropdown-content5,
.dropdown5:hover .dropdown-otherarea5 {
    display: block;
}
.dropdown5.hide-menus5 .dropdown-content5,
.dropdown5.hide-menus5 .dropdown-otherarea5 {
    display: none;
}


.dropdown6:hover .dropdown-content6,
.dropdown6:hover .dropdown-otherarea6 {
    display: block;
}
.dropdown6.hide-menus6 .dropdown-content6,
.dropdown6.hide-menus6 .dropdown-otherarea6 {
    display: none;
}


.dropdown7.hide-menus7 .dropdown-content7,
.dropdown7.hide-menus7 .dropdown-otherarea7 {
    display: none;
}





* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.dropdown10 input:active{
	color:red;
	border:none;
}

.search-input {
	border: none;
	outline: none;
	box-shadow: none;
	font-size:20px;
}
</style>
<style>

.dropdown-languague {
	position: relative;
	display: inline-block;
	

}


.dropbtn-languague {
	background-color: #f5f5f8;
	color: #000000b8;

	font-size: 16px;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	transition: background-color 0.3s;

	right:10%;
}

.dropbtn-languague:hover {
	background-color: #f5f5f8;
}


.dropdown-content-languague {
	display: none;
	position: fixed;
	width:8.5%;
	height:85px;
	
	bottom:40px;
	
	right:14%;
	background-color: #f9f9f9;


	
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1;
	border-radius: 5px;
	overflow: hidden;
}



.dropdown-linkarea-languague{
	position: fixed;
	width:7.5%;
	height:auto;
	bottom:50px;
	right:15%;
	background-color: #f9f9f9;
	z-index: 2;
}


.dropdown-content-languague a {
	position:relative;
	color: #333;
	padding: 7px 10px;
	width:90%;
	/*width:100px;*/
	text-decoration: none;
	display: block;
	transition: background-color 0.3s;
	left:10px;
}

.dropdown-content-languague a:hover {
	background-color: #ddd;
}


.dropdown-languague:hover .dropdown-content-languague {
	display: block;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.footer a{
	color:#000000b8;
}
.footer h5{
	color:#000000e0;
}
</style>

<style>

.shop-button{
	padding: 9px;
	border: none;
	background-color:#0071e3;
	color:white;
	border-radius:13px;
	text-decoration:none;
	font-size:16px;
	margin-top:10px;
}

</style>