.create-container {
  width: 100vw;
  height: 85vh;
}

.vinyl-container,
.rotative-container {
  position: static;
}

.vinyl-container {
  width: 100%;
  animation: none;
  transform: rotate(0deg);
}
.disk-text {
  font-size: 100%;
  text-align: center;
  font-family: "Jost", cursive;
}

h1 {
  text-align: center;
  font-family: "Jost", cursive;
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove padding if any */
}

h2 {
  text-align: center;
  font-family: "Jost", cursive;
  margin-top: 10px;
}

/* Customizing all .btn-primary buttons */
.btn-primary {
  background-color: #715da1; /* Custom background color */
  border-color: #403164; /* Custom border color */
  border-width: 3px;
}

.btn-primary:hover {
  background-color: #403164; /* Hover color */
  border-color: #403164;
  border-width: 3px;
}

body {
  background-color: #86878f; /* Change this to your desired color */
}

.video-background {
  width: 100vw; /* Set the width to 100% of the viewport width */
  height: 80vh; /* You can adjust this height as needed */
  position: relative; /* Allows positioning of overlay elements */
  left: 50%; /* Position from the left */
  transform: translateX(-50%); /* Center the video */
  margin-bottom: 5%;
  z-index: 0;
}

.header {
  padding: 0; /* Remove any padding */
  margin: 0; /* Remove any margin */
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 1;
}

.section {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.section.who-we-are {
  animation: fadeIn 1.5s ease forwards;
  animation-delay: 0.3s;
}

.section.our-mission {
  animation: fadeIn 1.5s ease forwards;
  animation-delay: 0.6s;
}

.section.creation-process {
  animation: fadeIn 1.5s ease forwards;
  animation-delay: 0.9s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fixed navigation column on the left */
.nav-column {
  position: fixed;
  float: left;
  top: 4rem;
  left: 0rem;
  width: 12rem;
  padding: 1rem;
  background-color: #f9fafb;
  border-right: 1px solid #e2e8f0;
  height: calc(100vh - 4rem); /* Full height minus top padding */
  overflow-y: auto; /* Scroll if content overflows */
}

/* Content area with margin to avoid overlap with nav column */
.content-area-station {
  margin-left: 14rem; /* Adds space on the left to accommodate the fixed column */
}

.vinyl-view {
  position: fixed;
  float: right;
  top: 4rem;
  right: 0rem;
  width: 12rem;
  padding: 1rem;
  background-color: #f9fafb;
  border-right: 1px solid #e2e8f0;
  height: calc(100vh - 4rem); /* Full height minus top padding */
  overflow-y: auto; /* Scroll if content overflows */
}

.create-container {
  display: flex; /* Arrange child elements horizontally */
  width: 100vw;
  height: 85vh;
  gap: 1rem; /* Add spacing between child elements */
}

.nav-column {
  position: sticky; /* Keeps it in place while scrolling */
  margin-top: 0; /* Aligns it with the top of the viewport */
  margin-bottom: 10px; /* Adds space at the bottom */
  left: 0;
  width: 12rem;
  padding: 1rem;
  background-color: #f9fafb; /* Light background for contrast */
  border-right: 1px solid #e2e8f0; /* Subtle border for separation */
  height: calc(100vh - 4rem); /* Full height minus any offsets */
  overflow-y: auto; /* Add scrolling for overflow content */
  z-index: 20; /* Higher z-index to ensure it appears above other elements */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for better visibility */
}

.section {
  background-color: #B4BAC1;  /* Background color for each paragraph container */
  padding: 20px;  /* Add some padding for a more comfortable layout */
  margin-left: 10%;  /* Adds margin to the left */
  margin-right: 10%;  /* Adds margin to the right */
  margin-bottom: 10px;  /* Adds margin at the bottom */
  border-radius: 0px;  /* Optional: Adds rounded corners for a smoother look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Optional: Adds a soft shadow around the container */
}

.section h2 {
  text-align: center;  /* Center-align the section titles */
  font-size: 1.8em;  /* Make titles stand out */
  margin-bottom: 10px;  /* Add some space below the titles */
}

.section p {
  font-size: 1em;  /* Adjust text size for better readability */
  line-height: 1.6;  /* Increase line height for better text spacing */
  color: #333;  /* Dark grey text color for better contrast */
}

/* Add bottom margin to the vinyl record containers */
.col-12.col-sm-6 {
  margin-bottom: 35px;  /* Adjust this value for desired space between rows */
}