* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 97.8vh;
  background-color: #111;
  font-family: Arial, sans-serif;
}

video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease-in-out;
  will-change: filter, transform;
  background-color: #111; /* Prevent rendering artifacts */
  z-index: 5;
}

video.blurred {
  filter: blur(5px); /* Moderate blur */
  transform: scale(1); /* Subtle zoom */
}


#slider {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(.55,.06,.68,.19);
  z-index: 5;
}

.hidden {
  display: none;
}

.accordion {
  display: flex;
  position: absolute;
  width: 90%;
  height: 80vh;
  overflow: hidden;
  border: 3px solid #dedede;
  border-radius: 8px;
  top:9.5%;
}

.accordion-select {
  display: none; /* Hide radio buttons */
}

.accordion-title {
  width: 5%;
  height: 100%;
  background-size: cover;
  background-position: center;
  color: #7f8787;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: width 0.9s cubic-bezier(.65,.05,.36,1), filter 0.6s cubic-bezier(.65,.05,.36,1), border 0.6s cubic-bezier(.65,.05,.36,1);
  position: relative;
  font-size: 15px;
  filter: grayscale(100%);
  border-right: 2px solid white; /* white border between thumbnails */
}

.accordion-title:last-child {
  border-right: none; /* Remove border from the last item for a cleaner look */
}

.accordion-title:hover {
  filter: grayscale(0%); /* Return to color on hover */
}

.accordion-title span {
  display: none; /* Hide text as we are using images */
}

.accordion-content {
  flex: 1;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: all 0.6s ease-in-out;
  display: none; /* Hidden until activated */
}

/* Show the selected panel content */
.accordion-select:checked + .accordion-title + .accordion-content {
  display: block;
  width: 100%;
  height: 100%;
}

/* Expand the title when it is active */
.accordion-select:checked + .accordion-title {
   width: 80%;  /* Expanded width of the active panel */
   filter: grayscale(0%); /* Remove grayscale when selected */
    /* Remove the right border when expanded */
}

.logo-header
{
	position: absolute;
	top: 1.5%;
	z-index:6;
}

.logo{
	
	width: 30px;
	height:auto;
	
}

.social-footer img{
	
	height: 30px;
	width: auto;
	transition: transform 0.3s;
}

.social-footer{
	
	position: absolute;
	bottom: 1.5%;
	display: flex;
	gap: 20px;
	z-index:6;
}


/* Mobile Layout: 1080px and below */


/* Very Small Screens: 479px and below */
@media (max-width: 479px) {
	body {
	  min-height: 93vh;
	}
	
	.accordion {
	  position: absolute;
	  top:7%;
	}
	
	.social-footer{
		position: absolute;
		bottom: 9%;
	}
}
@media (min-width: 1700px) {
	body {
	  min-height: 98vh;
	}
	.accordion {
	  position: absolute;
	  top:10%;
	}
	.social-footer{
		position: absolute;
		bottom: 2.6%;
	}
	.logo-header{
	position: absolute;
	top: 2.8%;
    }
}