@font-face {
  font-family: "HumanSans";
  src: url("fonts/HumanSansotf/HumanSans-Regular.otf");
  src: url("fonts/HumanSanswoff/HumanSans-Regular.woff") format("woff"),
    url("fonts/HumanSansotf/HumanSans-Regular.otf") format("opentype");
}

body {
  margin: 0;
  overflow: hidden;
  font-family: "HumanSans";
  font-size: 14px;
  background-color: #2c2c2c;
}

/* CACHE BACKGROUND */
@media screen and (min-width: 1500px) and (max-width: 3500px) {
  .preload {
    display: none; 
    background-image: url("frame/00.jpg");
    background-image: url("frame/01.jpg");
    background-image: url("frame/02.jpg");
    background-image: url("frame/03.jpg");
    background-image: url("frame/04.jpg");
    background-image: url("frame/05.jpg");
    background-image: url("frame/06.jpg");
    background-image: url("frame/07.jpg");
    background-image: url("frame/08.jpg");
    background-image: url("frame/09.jpg");
    background-image: url("frame/10.jpg");
    background-image: url("frame/11.jpg");
    background-image: url("frame/12.jpg");
    background-image: url("frame/13.jpg");
    background-image: url("frame/14.jpg");
    background-image: url("frame/15.jpg");
    background-image: url("frame/16.jpg");
    background-image: url("frame/17.jpg");
    background-image: url("frame/18.jpg");
    background-image: url("frame/19.jpg");
    background-image: url("frame/20.jpg");
    background-image: url("frame/21.jpg");
    background-image: url("frame/22.jpg");
    background-image: url("frame/23.jpg");
    background-image: url("frame/24.jpg");
    background-image: url("frame/25.jpg");
    background-image: url("frame/night.jpg");
    background-image: url("frame/blanc.jpg");
    /* Add more background images as needed */
  }
}

/* CONTAINER BACKGROUND */
.preloader-container {
  width: 100%;
  height: 100vh;
  background: url("frame/blanc.jpg") no-repeat center top;
  background-color: #2c2c2c;
  background-size: contain;
  position: fixed;
  z-index: 1; /* Ensure the preloader is on top */
  opacity: 1; /* Initially visible */
  transition: opacity 4s;
}

.slide-container {
  width: 100%;
  height: 100vh;
  background: url("frame/00.jpg") no-repeat center bottom; /* Align the bottom of the image with the bottom of the container */
  background-size: cover;
  background-color: #2c2c2c;
  transition: background 1s;
}

.slide-container.smooth-transition {
  transition: background 1s ease; /* Apply the transition class */
}

.slide-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.book1 {
  position: absolute;
  width: 75px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book2 {
  position: absolute;
  width: 75px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book3 {
  position: absolute;
  width: 15px; /* Adjust size as needed */
  height: 75px; /* Adjust size as needed */
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book4 {
  position: absolute;
  width: 15px; /* Adjust size as needed */
  height: 75px; /* Adjust size as needed */
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book5 {
  position: absolute;
  width: 75px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book6 {
  position: absolute;
  width: 85px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book7 {
  position: absolute;
  width: 15px; /* Adjust size as needed */
  height: 75px; /* Adjust size as needed */
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book8 {
  position: absolute;
  width: 15px; /* Adjust size as needed */
  height: 75px; /* Adjust size as needed */
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book9 {
  position: absolute;
  width: 75px;
  height: 15px;
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book10 {
  position: absolute;
  width: 15px; /* Adjust size as needed */
  height: 75px; /* Adjust size as needed */
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}

.book11 {
  position: absolute;
  width: 15px; /* Adjust size as needed */
  height: 85px; /* Adjust size as needed */
  background-color: rgba(0, 0, 0, 0); /* Semi-transparent background */
  /* Add additional styling as needed */
}
.main-slider {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* @media only screen and (min-width: 1880px) {
  .book1 {
  }
  .book2 {
  }
  .book3 {
    top: 676px !important;
  }
  .book4 {
    top: 676px !important;
  }
  .book5 {
  }
  .book6 {
  }
  .book7 {
  }
  .book8 {
  }
  .book9 {
    top: 911px !important;
  }
  .book10 {
    top: 829px !important;
  }
  .book11 {
    top: 814px !important;
    height: 120px !important;
  }
} */
@media only screen and (max-width: 1500px) {
  .book1 {
  }
  .book2 {
  }
  .book3 {
    height: 47px !important;
  }
  .book4 {
    height: 47px !important;
  }
  .book5 {
  }
  .book6 {
  }
  .book7 {
    height: 47px !important;
  }
  .book8 {
    height: 47px !important;
  }
  .book9 {
  }
  .book10 {
    height: 47px !important;
  }
  .book11 {
    height: 47px !important;
  }
}

/* INCHIS CONTAINER BACKGROUND */

/* HEADER HOME*/
header {
  background-color: #2c2c2c; /* Background color for the header */
  color: #fff; /* Text color for the header */
  padding: 0px; /* Adjust the padding as needed */
}

.header-container {
  max-width: 100%; /* Set the maximum width for the header content */
  margin: 0 auto; /* Center the header content */
  display: flex; /* Use flexbox to create columns */
  justify-content: space-between; /* Space between columns */
  align-items: center; /* Vertically align content in the header */
  padding: 0 50px; /* Add padding to the columns as needed */
  height: 40px;
}

.logo {
  /* Styles for your logo, adjust as needed */
  padding-top: 5px;
  padding-right: 0px;
  padding-left: 8px;
}

.navigation {
  /* Styles for your navigation menu, adjust as needed */
}

.search {
  /* Styles for a search bar or other elements in the header, adjust as needed */
  padding-top: 5px;
  padding-right: 15px;
}
/* INCHIS HEADER HOME */

/* MENIU */
.menu-container {
  position: relative;
  display: inline-block; /* Ensures the icon and menu are aligned inline */
}

.menu-icon {
  cursor: pointer;
  /* Add more styling as needed */
}

.menu-icon .line {
  width: 45px;
  height: 2px;
  background-color: white;
  margin: 5px 0;
  /* Add more styling as needed */
}

.navigation-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  right: 134%; /* Adjust if necessary to position the menu */
  top: 0;
  white-space: nowrap;
  transition: opacity 1s, visibility 1s;
  /* Add more styling as needed */
}

.navigation-menu.open {
  opacity: 1;
  visibility: visible;
}

.navigation-menu a {
  transition: opacity 1s, visibility 1s;
  display: inline-block; /* Makes each link a block, allowing them to stack vertically */
  padding: 3px 6px;
  color: #fff;
  text-decoration: none;
  /* Add more styling as needed */
}

/* Additional styling when the menu is open */
.navigation-menu.open {
  display: block;
}

.close-btn {
  display: none;
}

/* INCHIS MENIU */

/* BUTON MARGINE CONTACT */
.sidebar {
  position: fixed;
  top: 85%;
  right: -73px;
  transform: translateY(-50%);
  z-index: 1000; /* Ensures it's above other content */
}

.sidebar-button {
  display: block;
  background-color: #ff3500; /* Button color */
  color: white;
  text-align: center;
  padding: 5px 22px; /* Adjust padding as needed */
  text-decoration: none;
  font-size: 14px;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

.sidebar-button:hover {
  background-color: #ff3500; /* Darker shade for hover effect */
}

#animated-vertical-line {
  width: 2px;
  height: 100%;
  background-color: black;
  position: relative;
  overflow: hidden;
}

#animated-vertical-line::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  animation: slideDown 3s linear infinite;
}

@keyframes slideDown {
  from {
    top: -100%;
  }
  to {
    top: 100%;
  }
}
/* INCHIS BUTON MARGINE CONTACT */

/* BUTON DAY/NIGHT */
/* Container for the switch and text */
.switch-container {
  display: flex;
  align-items: center;
}

/* Styling for the switch text */
.switch-text {
  margin-left: 8px; /* Adjust the margin as needed */
  margin-top: 6px;
  color: #999; /* Text color */
  position: absolute;
  font-size: 12px; /* Text font size */
}

@media screen and (max-width: 768px) {
  /* Adjust the breakpoint as needed */
  .switch-text {
    display: none;
  }
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide the default checkbox input */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2c2c2c;
  transition: 0.4s;
  border-radius: 34px;
  border: 1px solid #a7a7a7; /* Add a white border to the switch */
}

/* Styling for the slider when it's on */
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Styling for the checkbox when it's checked */
input:checked + .slider {
  background-color: #2c2c2c;
}

/* Styling for the slider when it's on */
input:checked + .slider:before {
  transform: translateX(26px);
}
/* INCHIS BUTON DAY/NIGHT */