ul {
  list-style-type: disc; /* Default bullet style (solid circle) */
  margin-left: 30px; /* Indent the list */
  padding-left: 0; /* Remove default padding */
}

footer li {
  padding-bottom: 5px; /* Add some space between list items */
  line-height: 1.5; /* Improve readability */
  color: #F8F4E3; /* Dark gray text color */
}

/* Example of changing the bullet style */
.square-bullets {
  list-style-type: square; /* Square bullets */
}

.circle-bullets {
  list-style-type: circle; /* Hollow circle bullets */
}

/* Example of using an image as a bullet */
.custom-bullets {
  list-style-type: none; /* Remove default bullets */
}

.custom-bullets li {
  background-image: url('your-custom-bullet-image.png'); /* Replace with your image */
  background-repeat: no-repeat;
  background-position: 0 8px; /* Adjust position as needed */
  padding-left: 20px; /* Make space for the image */
}

/* Example of removing bullets entirely */
.no-bullets {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

/* Styling for your OUTER CONTAINER (the section) */
.parchment-section {
    background-color: #FEECC4; /* Fallback color or overall section background color */
    padding: 20px 0; /* Add vertical padding for the section itself. Horizontal padding is handled by .container */
    width: 100%; /* Ensures it spans full browser width */
}
.parchment-section-light {
    background-color: #336633; /* Fallback color or overall section background color */
    padding: 20px 0; /* Add vertical padding for the section itself. Horizontal padding is handled by .container */
    width: 100%; /* Ensures it spans full browser width */
}
/* 1. Styles for the main section */
.hero-section {
  background-color: #336633; /* Your desired background color */
  position: relative; /* Crucial for containing the absolute-positioned overlay */
  overflow: hidden; /* Ensures anything extending beyond is clipped */
  padding: 60px 20px; /* Example padding for content */
  color: white; /* Text color for content */
  min-height: 500px; /* Example height for the section */
  /* If you want the image directly on the section: */
  /* background-image: url('path/to/your-semi-transparent-image.png'); */
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
  /* background-size: cover; */
  /* NO background-attachment: fixed; here */
}

/* 2. Layer for the background image (within the .background-overlay div) */
.hero-section .background-overlay {
  position: absolute; /* Positioned relative to the .hero-section */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/img/home/tower.png'); /* ⬅️ Your semi-transparent PNG */
  background-repeat: no-repeat;
  background-position: center center; /* Center the image within this overlay div */
  background-size: cover; /* Cover the entire overlay div */
  /* REMOVE background-attachment: fixed; from here */
  z-index: 1; /* Place it above the section's background-color (default) */
  /* The semi-transparency comes from the PNG itself. */
  /* If your PNG is opaque, you can add 'opacity: 0.5;' here */
}

/* 3. Styles for the content to ensure it's on top */
.hero-section .container { /* Targeting the container that holds your actual content */
  position: relative; /* Bring content to front */
  z-index: 2; /* Higher than the .background-overlay */
  /* Any other styles for your container */
}

/* You might need to adjust styles for .section-title, .item, etc.,
   to ensure their z-index is higher than .background-overlay if they aren't by default.
   Usually, position: relative; on the parent .container will handle it. */

/* 4. Hide the background image on mobile devices */
@media (max-width: 768px) {
  .hero-section .background-overlay {
    display: none; /* Hides the image overlay on screens smaller than 769px */
  }
  /* Optional: Adjust padding or other styles for mobile if the image absence changes the layout */
  .hero-section {
    padding: 50px 15px;
  }
}
/* icon */
.about .item .icon {
    position: absolute;
    bottom: -6px;
    left: -6px;
    width: 90px;
    height: 90px;
    background: #FEECC4 !important;
    border-top-right-radius: 50%;
    padding: 15px;
}
.about .item:hover .icon .arrow {
    transform: scale(1.05);
}
.about .item .icon::before {
    position: absolute;
    content: "";
    bottom: 6px;
    right: -20px;
    background: transparent;
    width: 20px;
    height: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 6px 6px 0 6px #FEECC4 !important;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.about .item .icon::after {
    position: absolute;
    content: "";
    top: -20px;
    left: 6px;
    background: transparent;
    width: 20px;
    height: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 6px 6px 0 6px #FEECC4 !important;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.about .item .icon .arrow {
    position: absolute;
    background: #101010;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    width: 60px;
    height: 60px;
    line-height: 60px;
}
.about .item .icon .arrow span {
    color: #fff;
    font-size: 24px;
}
.about .item:hover .icon .arrow {
    color: #000;
    background: #f3a932;
}
.about .item:hover .icon .arrow span {
    color: #000;
}
.bottom1 {
    /* ... positioning properties based on one of the scenarios above ... */
    
    /* Modern way to write transform: */
    transform: translateY(-10%); /* Cleaner than translate(0%, -50%) */
    
    /* Remove vendor prefixes for modern browsers unless you need to support very old ones */
    /* -webkit-transform: translate(0%, -50%); */ 
}
.v-top1 {
    position: absolute;
    width: 100%;
    top: 18%;
    left: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}
/* ======= Section style ======= */
.section1-padding {
    padding: 120px 0;
}
.about .item .title p {
    color: #fff;
    font-size: 17px;
    margin-bottom: 5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 2px;
}
.image-subtitle {
    position: relative;
    font-family: "Almendra", serif;
    font-weight: 700;
    color: #101010;
    font-size: 17px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: inline-flex; /* Use inline-flex if you want it to flow inline with text */
    align-items: center;
    padding-left: 15px;
    text-transform: none;
} 
/* ======= Home sheild ======= */
/* Mobile-first approach: Default styles for mobile */
.shield-section {
  background-image: none; /* No background image by default on small screens */
  min-height: 200px;
  padding: 20px;
}

/* Media query for desktop and larger screens */
@media (min-width: 769px) { /* Applies when viewport is 769px or wider */
  .shield-section {
    background-image: url('../img/home/shield.png');
    background-repeat: no-repeat;
    background-position: 700px 240px;
    background-size: auto;
    min-height: 400px;
  }
}
/* ======= Home broach ======= */
/* Mobile-first approach: Default styles for mobile */
.broach-section {
  background-image: none; /* No background image by default on small screens */
  min-height: 200px;
}

/* Media query for desktop and larger screens */
@media (min-width: 769px) { /* Applies when viewport is 769px or wider */
  .broach-section {
    background-image: url('../img/home/broach.png');
    background-repeat: no-repeat;
    background-position: 80px 50px;
    background-size: auto;
    min-height: 400px;
  }
}

.book-section {
  /* Default styles for mobile - no background images */
  background-image: none;
  min-height: 200px;
  padding: 20px;
}

@media (min-width: 769px) {
  .book-section {
    /* Define both images, separated by a comma */
    background-image: 
      url('../img/home/shield.png'),
      url('../img/home/broach.png');
    
    /* Define repeat behavior for each image, in the same order */
    background-repeat: no-repeat, no-repeat;
    
    /* Define position for each image, in the same order */
    background-position: 634px 700px, 80px 50px;
    
    /* Define size for each image, in the same order */
    background-size: auto, auto;
    
    min-height: 400px;
  }
}

.riddle-section {
  /* Default styles for mobile - no background images */
  background-image: none;
  min-height: 200px;
  padding: 20px;
}

@media (min-width: 769px) {
  .riddle-section {
    /* Define both images, separated by a comma */
    background-image: 
      url('../img/home/shield.png'),
      url('../img/home/broach.png');
    
    /* Define repeat behavior for each image, in the same order */
    background-repeat: no-repeat, no-repeat;
    
    /* Define position for each image, in the same order */
    background-position: 634px 580px, 80px 80px;
    
    /* Define size for each image, in the same order */
    background-size: auto, auto;
    
    min-height: 400px;
  }
}
.chronicle-section {
  /* Default styles for mobile - no background images */
  background-image: none;
  min-height: 200px;
  padding: 20px;
}

@media (min-width: 769px) {
  .chronicle-section {
    /* Define both images, separated by a comma */
    background-image: 
      url('../img/home/shield.png'),
      url('../img/home/broach.png');
    
    /* Define repeat behavior for each image, in the same order */
    background-repeat: no-repeat, no-repeat;
    
    /* Define position for each image, in the same order */
    background-position: 834px 398px, 80px 20px;
    
    /* Define size for each image, in the same order */
    background-size: auto, auto;
    
    min-height: 400px;
  }
}
 
/* --- BASE STYLES: Mobile Phones and Smaller Tablets (up to 767px) --- */
/* These styles apply by default to the smallest screens */
.overlay-content-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    width: 100%;
    max-width: 350px;   /* Default max-width for very small screens */
    text-align: center;
    z-index: 10;
    padding: 55px;
    box-sizing: border-box;
}

.overlay-content-wrapper .overlay-image {
    max-width: 100%; /* Image will take up 100% of the wrapper (max 480px) */
    height: auto;
    display: block;
    margin: 120px auto 15px auto;
}

/* --- MEDIA QUERY: For Your Lenovo Tablet (and other medium screens) --- */
/* Applies to screens from 768px up to 1399px.
   This range *specifically* captures your 1385px wide tablet. */
@media (min-width: 768px) and (max-width: 1399px) {
    .overlay-content-wrapper {
        max-width: 480px;   /* Keep the wrapper at 480px max-width for this range */
        padding: 15px;      /* Consistent padding */
        /* You might want to adjust transform slightly for vertical centering on tablets */
        /* transform: translate(-50%, -50%); */
    }
    .overlay-content-wrapper .overlay-image {
        max-width: 100%; /* Image remains 100% of the 480px wrapper */
        margin-bottom: 15px;
    }
}

/* --- MEDIA QUERY: For Large Desktops and very wide screens (1400px and up) --- */
/* This is where the 600px max-width kicks in */
@media (min-width: 1400px) {
    .overlay-content-wrapper {
        max-width: 600px;   /* Wrapper becomes 600px max-width */
        padding: 20px;      /* Restore larger padding */
        transform: translate(-50%, -55%); /* Original vertical centering */
    }
    .overlay-content-wrapper .overlay-image {
        max-width: 80%; /* Image becomes 100% of the 600px wrapper */
        margin-bottom: 20px;
    }
}

/* --- YOUR OTHER OVERLAY CONTENT STYLES (Keep these as they are) --- */
.overlay-content-wrapper .overlay-text {
    margin-top: 20px;
}

.overlay-content-wrapper h6 {
    color: white;
    margin-bottom: 10px;
}

.overlay-content-wrapper .button-3 {
    display: inline-block;
    margin-top: 15px;
}
/* Video */
.my-video-style {
    object-fit: contain; /* Or 'cover' depending on your desired visual outcome for "zoomed in" */
    object-position: center;
}
/* Text */
.big-text {
    font-size: 35px !important;
    font-family: "Almendra", serif !important;
    color: #f3a932 !important;
    position: relative !important;
    margin-bottom: 15px !important;
    line-height: 1.2em !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: none !important;
}
/* Mobile-first approach: Default styles for mobile */
.big-text {
  font-size: 24px !important;
    font-family: "Almendra", serif !important;
    color: #f3a932 !important;
    position: relative !important;
    margin-bottom: 15px !important;
    line-height: 1.2em !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: none !important;
}
.title-span {
  color: #f3a932;
  font-weight: bold;
  font-size: 28px;
}
.side-text {
    font-size: 18px !important;
    font-family: "Almendra", serif !important;
    color: #f3a932 !important;
    position: relative !important;
    margin-bottom: 15px !important;
    line-height: 1.2em !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: none !important;
}
.gold-text {
    font-size: 35px;
    font-family: "Almendra", serif;
    color: #f3a932;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: none;
}

    .video-wrapper {
    position: relative; /* Essential for positioning the video absolutely within it */
    overflow: hidden; /* Hide any overflow from the video */
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; /* Place the video behind other content */
    transform: translate(-50%, -50%);
    background-size: cover; /* Ensures the video covers the entire container */
}

.image-padding {
    padding-top: 500px;
    padding-bottom: 100px;
}
    /* Style for the play button container when video is playing */
.play-pause-button.is-playing {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}

/* Ensure the button is visible by default */
.play-pause-button {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition */
}
/* Style for the smaller subtitle line within the h1 */
.section-title h1 .subtitle-line {
  font-size: 0.7em; /* Makes this span 70% the size of its parent h1 */
  line-height: 1.4em; /* Adjust line height for readability of the smaller text */
  display: block; /* Ensures it acts like a block element, useful if you want full width */
  margin-top: 5px; /* Add some space above the subtitle line */
  /* You can also change color if desired */
  color: #f3a932; /* Example: a slightly muted color */
}
/* Media Query for Mobile Phones */
@media (max-width: 767px) { /* Targets screens up to 767px wide (Bootstrap's 'sm' breakpoint) */
  .section-title {
    padding-top: 25px; /* Add padding to the top of the title on mobile */
    /* You might also adjust margin if needed for overall spacing */
    margin-top: 10px; /* Example: slightly less top margin on mobile */
    margin-bottom: 15px; /* Example: slightly less bottom margin on mobile */
  }
}

  .section-title h1 .subtitle-line {
    font-size: 15px; /* Even smaller pixel size for subtitle on mobile */
    line-height: 1.2em;
  }