/* Full-screen loading container */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95); /* Darker background */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  padding: 20px;
}

/* Circular Loader */
.loader {
  width: 15vw; 
  height: 15vw;
  max-width: 100px;
  max-height: 100px;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-top: 8px solid white;
  animation: spin 1s linear infinite;
}

/* Percentage Display (Perfectly Centered) */
#countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centered */
  font-size: 5vw;
  color: white;
  font-weight: bold;
  text-align: center;
}

/* Rotation Animation */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Mobile-specific adjustments */
@media (max-width: 600px) {
  #loading-screen {
    background: rgba(0, 0, 0, 1); /* Even darker on mobile */
  }

  .loader {
    width: 30vw;
    height: 30vw;
    max-width: 90px;
    max-height: 90px;
    border-width: 6px;
  }

  #countdown {
    font-size: 10vw; /* Larger text */
  }
}

/* Desktop-specific refinements */
@media (min-width: 1200px) {
  .loader {
    width: 12vw;
    height: 12vw;
  }

  #countdown {
    font-size: 2vw;
  }
}


.bg-primary-catalog {
  position: relative;
  overflow: hidden;
  background-color: #f8f9fa;
}

#catalog {
  position: relative;
  width: 100%;
  height: 900px;
}
/* Container styling */
.button-container {
  display: flex;
  flex-wrap: nowrap; /* No wrapping of buttons */
  overflow-x: auto; /* Enable horizontal scrolling */
  justify-content: flex-start; /* Align buttons to the left */
  align-items: center; /* Center buttons vertically */
  padding: 10px;
  gap: 10px; /* Space between buttons */
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* Optional: Add background color */
  scrollbar-width: thin; /* Custom scrollbar for Firefox */
}

/* Custom scrollbar styling */
.button-container::-webkit-scrollbar {
  height: 8px; /* Height of horizontal scrollbar */
}

.button-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

/* Button styling */
.button {
  background-color: #f48221; /* Button color */
  color: #fff; /* Text color */
  border: none;
  border-radius: 5px; /* Rounded corners */
  padding: 10px 15px; /* Padding for the button */
  cursor: pointer;
  font-size: 14px; /* Adjust font size */
  transition: background-color 0.3s ease; /* Smooth hover effect */
  white-space: nowrap; /* Prevent text wrapping */
}

.button:hover {
  background-color: #d96e1b; /* Slightly darker shade for hover */
}

/* Responsive Design */
@media (max-width: 600px) {
  .button-container {
      flex-wrap: nowrap; /* Prevent wrapping */
      overflow-x: auto; /* Allow horizontal scrolling on smaller screens */
  }
  .button {
      padding: 10px 20px; /* Increase padding for better touch target size */
      font-size: 16px; /* Slightly larger font size for touch devices */
  }
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f48221;
  --bs-btn-border-color: #f48221;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f8943e;
  --bs-btn-hover-border-color: #f48221;
  --bs-btn-focus-shadow-rgb: 85, 122, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2c4fc3;
  --bs-btn-active-border-color: #294ab7;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #3763f4;
  --bs-btn-disabled-border-color: #3763f4;
}



.navbar-brand {
  background: url("../../assets/img/FripGroup_shorter.png") center / cover no-repeat;
}

.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: #f48221;
  border-color: #f48221;
}

.maincolour {
  background: radial-gradient(#fffafa, white);
  font-family: 'Arbutus Slab', serif;
}

.bg-primary-gradient {
  background: #f7f6f6;
}

.animatedapng {
  position: relative;
  flex: 0 0 45%;
  transform: translate3d(30%, 5%, 0);
}

.ball {
  width: 300px;
  height: 300px;
  transform: translate(-27px);
}

.fripparaagraf {
  font-size: 24px;
  font-weight: bold;
}

.bs-icon-md.bs-icon-circle.bs-icon-primary.bs-icon.bs-icon-md {
  background: rgb(244,130,33);
}

.bs-icon-sm.bs-icon-circle.bs-icon-primary.bs-icon {
  background: rgb(244,130,33);
}

.img-fluid {
  max-width: 100%;
  height: auto;
  /*transform: translate(-54px);*/
  overflow: clip;
  border-radius: 31px;
}

.animatedapng1 {
  position: relative;
  flex: 0 0 35%;
  transform: translate3d(1%, 10%, 0);
}

#container3D {
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 300px;
  overflow: hidden;
}

@media (min-width: 992px) {
  .ball {
  }
}