body {
  margin: 0;
  padding: 0;
  background-color: #000; /* Black */
  background-size: cover;
  background-position: center 10%; /* This will shift the image down */
  background-repeat: no-repeat;
  transition: background-image 1s ease-in-out;
}

#menu {
  position: absolute; /* This allows us to specify the position of the menu */
  top: 50px; /* Adjust this to create the desired margin from the top of the page */
  left: 0; /* Align the menu with the left side of the page */
  display: flex;
  flex-direction: column; /* Stack the items vertically */
  justify-content: flex-start; /* Align the items at the start of the container */
  width: auto; /* The width will adjust to fit the content */
  overflow-y: auto; /* If the items exceed the container's height, make it scrollable */
}

#menu nav ul {
  list-style: none; /* remove the default bullet points */
  margin: 0;
  padding: 0;
  display: flex; /* make the list items display in a row */
  flex-direction: column; /* stack the items vertically */
}

#menu nav ul li {
  margin: 0;
  padding: 0;
}

#menu img {
  width: 10%; /* adjust as necessary */
  height: auto;
  transition: filter 0.3s ease; /* This will make the brightness change smoothly over 0.3 seconds */
}

#menu li {
  margin-bottom: 1px; /* adds space below each menu item */
}

#menu a:hover img {
  filter: brightness(2.0); /* Adjust as necessary. This line to adjust the intensity of the effect */
}

#floating-button {
  position: fixed;
  bottom: 10px;
  right: 15px;
  z-index: 100; /* Make sure the floating image and menu are on top of other elements */
}

#floating-button img {
  width: 200px; /* Adjust as necessary */
  height: auto;
  cursor: pointer; /* Change the cursor to a hand when hovering over the image */
  transition: filter 0.3s ease; /* This will make the brightness change smoothly over 0.3 seconds */
}

#floating-button:hover img {
  filter: brightness(1.5); /* Adjust as necessary. This line to adjust the intensity of the effect */
}

#popup-menu {
  display: none; /* By default, the popup menu is hidden */
  position: absolute;
  bottom: calc(57% - 100px); /* Position the popup menu at the center of the floating image */
  right: 100%; /* Position the popup menu to the left of the floating image */
}

#floating-button:hover #popup-menu {
  display: flex; /* Show the popup menu when hovering over the floating image */
  flex-direction: column; /* Make the popup menu items stack vertically */
}

#popup-menu li {
  list-style-type: none; /* Remove bullet points */
}

#popup-menu a {
  display: block; /* Stack the links vertically */
  padding: 10px; /* Add some padding around the links */
  text-decoration: none; /* Remove the default underline from the links */
  color: #000; /* Set the text color of the links */
}

#popup-menu img {
  width: 100px; /* adjust as necessary */
  height: auto;
  transition: filter 0.3s ease; /* This will make the brightness change smoothly over 0.3 seconds */
}

#popup-menu a:hover img {
  filter: brightness(2.0); /* Adjust as necessary. This line to adjust the intensity of the effect */
}

.header-image {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.header-image img {
  width: 25%;  /* adjust this as necessary */
  height: auto;
}

/* Styling for the quote box */
#quote {
    width: 250px;
    height: 260px;
    position: absolute;
    top: 5%; 
    right: 2%;
    border: 2px solid #878484; /* Updating the border color */
    padding: 20px;
    font-size: 1.2em;
    text-align: center;
    color: #c7b18c; /* Updating the text color */
    background-color: transparent;  /* Keeping the background transparent */
    display: flex; /* Make this a flex container */
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text, if it's not already centered */
    font-family: Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;

    /* New properties */
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.7);
}

/* Logo Placement */
#index-logo {
    position: absolute;
    top: 120px; /* adjust as needed */
    right: 220px; /* moved to the right */
    z-index: 200; /* making sure it's on top of other elements */
}

#index-logo img {
    width: 120px; /* adjust as necessary */
    height: auto;
}

#index-speech-bubble {
    position: absolute;
    top: 10px; /* adjust to make it slightly up compared to the logo */
    right: 20px; 
    z-index: 199; 
}

#index-speech-bubble img {
    width: 200px;
    height: auto;
}

#index-compass {
    position: absolute;
    top: 10%; 
    left: 25%;
    width: 275px;
    height: 275px;
    background: url('../images/medieval-compass-01.png') no-repeat center center;
    background-size: contain;
    z-index: 9999;
	animation: compassAnimation 1s infinite alternate;
}

@keyframes compassAnimation {
    0%, 49% {
        background-image: url('../images/medieval-compass-01.png');
    }
    50%, 100% {
        background-image: url('../images/medieval-compass-02.png');
    }
}

#index-text {
    width: 750px; 
    position: absolute;
    top: 15%; 
    left: 40%;
    padding: 20px;
    font-size: 2.3em;
    text-align: left;
    color: #c7b18c;
    font-family: Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    opacity: 1; /* Start with invisible text */
	
	/* New properties */
    text-shadow: 12px 12px 16px rgba(0, 0, 0, 1);

}

#infoBoxContainer {
    position: absolute;
    top: 65%; 
    right: 45%;
    /* Any other positioning properties you might need */
}

/* Styling for the info box */
#infoBox {
    width: 472px;  /* Adjusted width */
    height: 250px; /* Adjusted height */
    position: relative;
    top: 65%; 
    right: 62%;
    border: 2px solid #878484;
    padding: 20px;
    font-size: 1.0em;
    text-align: center;
    color: #c7b18c;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.7);
	
	text-align: left;  /* Left align the text */
    padding-left: 25px; /* Set a left margin (you can adjust this value as needed) */
	padding-top: 13px; /* Set a top margin (you can adjust this value as needed) */	
}

#infoBox::before {
    content: ""; /* Mandatory for the pseudo-element to display */
    position: absolute;
    width: 700px;
    height: 100px; /* For visibility. Adjust as required */
    right: -703px; /* Positions it to the right of the #infoBox */
    top: 119.5px; /* Adjust this to move it up or down relative to the #infoBox */
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid #878484;
    border-left: none; /* Remove the left border so it looks connected */
	
}

#infoBox::after {
	content: "";
    position: absolute;
    top: 121px;  /* or wherever you want the strip to start relative to the top of #infoBox */
    right: -2px; 
    width: 2px; 
    height: 100px; /* Match this height to the height of ::before */
    background-color: #000;  /* This is black and fully opaque. Adjust color if needed. */
}

#friendsArrow {
    position: absolute;
    top: 115px;  /* Adjust to where you want the image's top-left corner to be */
    left: 105px;  /* Adjust to where you want the image's top-left corner to be */
    z-index: 2;  /* Ensures this is on top */
}

@keyframes swing {
    0%, 100% {
        transform: rotate(-14deg);  /* Downward swing */
    }
    50% {
        transform: rotate(10deg);   /* Upward swing */
    }
}

#friendsArrow img {
    width: 150px;  /* Adjust to your desired width */
    height: auto;
    animation: swing 5s ease-in-out infinite;  /* Adjust '5s' to change the speed */
}

/* Product Container */
.featured-products {
    display: flex;
    justify-content: flex-end;
    width: 100%; 
    max-width: 1600px; 
    margin: auto;
    padding-right: 1%;
}

.featured-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 75vh;
}

/* Stone Frames */
.stone-frame {
    position: relative; 
    top: 21%;
    width: 460.416664px;
    height: 650px;
    background-image: url('../images/stone-frame-widened.png'); 
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 20px;
}

/* Place in Scrip Button */
.place-in-scrip-button {
  position: absolute;
  top: 90px;
  right: 10px;
  z-index: 999; /* Ensures it's above everything else */
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  width: 120px;
  height: auto;
}

.place-in-scrip-button img {
  width: 100%;
  height: auto;
  display: block;
  transition: filter 0.3s ease;
}

.place-in-scrip-button:hover img {
  filter: brightness(1.5);
}

/* Product Images */
.product-image {
  position: relative;
  width: 55%;
  height: auto;
  max-height: 55%;
  object-fit: contain;
  z-index: 1;
  top: 165px;
  left: 97px;
  cursor: url('/images/plus-sign-cursor.png'), pointer; /* Cursor changes on hover */
}

/* Invisible Shield for the Product Image */
.product-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none; /* Ensures clicks pass through to the image underneath */
}

.product {
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
}

.stone-frame {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* Modal Styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top of everything else */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgba(0,0,0,0.8); /* Dark background w/ opacity */
  overflow: auto; /* Enable scroll if needed */
  /* Remove the cursor rule from here */
}

.modal-content {
  position: fixed; /* Stay in place */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%; /* Adjust as necessary */
  max-height: 90%; /* Adjust as necessary */
  cursor: url('/images/x-sign-cursor.png'), auto; /* Cursor changes to 'x' on hover over the modal content */
}

/* Product Images */
.product-image {
  position: relative;
  width: 55%;
  height: auto;
  max-height: 55%;
  object-fit: contain;
  z-index: 1;
  top: 165px;
  left: 97px;
  cursor: url('/images/plus-sign-cursor.png'), pointer; /* Cursor changes to plus sign on hover */
}

/* Invisible Shield for the Product Image */
.product-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none; /* Ensures clicks pass through to the image underneath */
}