@charset "UTF-8";
/* CSS Document */

/* Define the custom font */
@font-face {
  font-family: 'CustomFont'; /* Name your font family */
  src: url('AJensonPro-Regular.otf') format('opentype'); /* Specify font format */
}

/* Define the custom italic font */
@font-face {
  font-family: 'CustomItalicFont';
  src: url('AJensonPro-It.otf') format('woff2'), /* Modern browsers */
       url('AJensonPro-It.otf') format('woff');  /* Older browsers */
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: 'CustomStrongFont';
  src: url('AJensonPro-Bold.otf') format('woff2'), /* Modern browsers */
       url('AJensonPro-Bold.otf') format('woff');  /* Older browsers */
  font-style: normal;
  font-weight: bold;
}

/* Use the custom font in your body */
body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh; /* Full viewport height */
  font-family: 'CustomFont'; /* Use fallback fonts */
}

/* Apply the custom font to the <em> tag */
em {
  font-family: 'CustomItalicFont', serif; /* Fallback to serif if the font doesn't load */
  font-style: italic;
}

strong {
  font-family: 'CustomStrongFont', serif; /* Fallback to serif if the font doesn't load */
  font-style: strong;
  font-size: 26px;
}

sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 1; /* Adjust vertical spacing */
  color: #007acc; /* Match the color of footnote links */
  cursor: pointer; /* Add a pointer to indicate interactivity */
}

/* Styling the ordered list for footnotes */
ol {
  font-family: 'CustomItalicFont', serif;;
  font-size: 0.9em;
  line-height: 1.6;
  margin-top: 1em;
  color: #555;
}

ol li {
  margin-bottom: 0.5em; /* Add spacing between footnotes */
}

/* Styling links in the footnotes */
ol li a {
  color: #007acc;
  text-decoration: none;
  border-bottom: 1px dotted #007acc; /* Underline effect for links */
}

ol li a:hover {
  color: #005f99;
  border-bottom: 1px solid #005f99; /* Change hover style */
}


/* Left Menu Styles */
#menu {
  width: 100; /* Fixed width for the menu */
  min-width: 200px; /* Prevent shrinking below this width */
  background-color: #FFFEFE; /* Light gray background */
  padding: 20px;
  box-sizing: border-box; /* Include padding in width/height calculations */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#menu li {
  margin: 10px 0;
}

#menu a {
  text-decoration: none;
  color: #000000;
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

#menu a:hover {
  color: #007BFF;
}

/* Main Content Styles */
#content {
  flex-grow: initial; /* Allow content to take up the remaining space */
  display: flex;
  flex-direction: column; /* Stack content vertically */
  align-items: flex-start; /* Align items to the left */
  padding: 0;
  box-sizing: border-box;
}

#text-content {
  width: 44%;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 18px;
  
}

#text-content-2 {
  width: 100%;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
  margin-top: 18px;
  
}

/* Medium screens (tablets or smaller) */
@media (max-width: 980px) {
  #text-content {
    width: 65%; /* For tablets and small desktops */
  }
}

/* Small screens (phones) */
@media (max-width: 768px) {
  #text-content {
    width: 96%; /* Full width on mobile screens */
  }
}

/* Very small screens (e.g., phones in portrait mode) */
@media (max-width: 480px) {
  #text-content {
    width: 98%; /* Full width for very small screens */
    font-size: 14px; /* Optionally, reduce font size for smaller screens */
  }
}

/* Image Styles */
#content img {
  width: 95%; /* Width of images */
  margin-bottom: 2px; /* Space between images */
  object-fit: cover; /* Ensure consistent aspect ratio */
}

/* Footer styles */
#footer {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%;
  padding: 20px;
  position: relative;
  text-align: center; /* Ensure text aligns to the center */
}



/* Responsive Menu Enhancements */

/* Default Menu as Fixed Sidebar */
#menu {
  position: fixed; /* Keep the menu at the top */
  top: 0;
  left: 0;
  height: 100vh; /* Full height to cover the viewport */
  z-index: 100; /* Ensure it stays above other content */
  overflow-y: auto; /* Add scrolling if the menu content exceeds viewport height */
}

#content {
  margin-left: 265px; /* Add space for the fixed menu */
  padding: 0; /* Standard content padding */
}

/* Carousel Modal Styles */
.carousel-modal {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
  justify-content: center;
  align-items: center;
  z-index: 200; /* Above other elements */
}

.carousel-image {
  max-width: 70%;
  max-height: 70%;
  margin: auto;
  display: block;
}

.carousel-close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 40px;
  color: #fb0c0c;
  cursor: pointer;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: white;
  cursor: pointer;
  user-select: none;
}

.carousel-prev {
  left: 10%;
}

.carousel-next {
  right: 10%;
}