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

/* ====================== 
   STARTING OF INTRODUCTION PAGE STYLES 
====================== *//*/* 
/* Introduction Section Styling */
#introduction {
  padding: 50px 0;
  background-color: #f0f0f0; /* Light background */
  position: relative; /* Position relative to the viewport */
  overflow: hidden; /* Hide any overflow */
}

.intro-container {
  background-color: #fff; /* White background for the container */
  padding: 40px; /* Increased padding for more space */
  border-radius: 8px; /* Rounded corners for a softer look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
  max-width: 800px; /* Max width to center the content */
  margin: 0 auto; /* Center the container */
  position: relative;
}

.section-title {
  text-align: center; /* Center-align title */
  margin-bottom: 30px;
}

.section-title h2 {
  font-size: 32px; /* Font size for the main title */
  color: #333333; /* Darker color for better readability */
  margin: 0; /* Remove default margin */
}

.intro-image-container {
  margin-bottom: 20px; /* Space between the image and text */
  text-align: center; /* Center the image */
}

.intro-image-container img {
  width: 100%; /* Responsive image width */
  max-width: 600px; /* Limit the max-width of the image */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Align the image in the center */
  margin-left: auto; /* Center image */
  margin-right: auto; /* Center image */
}

.text-justify {
  text-align: justify; /* Justify text alignment */
  margin: 20px auto; /* Add top and bottom margin, center horizontally */
  padding: 20px; /* Added padding for the text container */
  max-width: 1000px; /* Increase the max width to make it wider */
  background-color: #fff; /* Optional: White background for contrast */
  border-radius: 8px; /* Optional: Rounded corners for a softer look */
}

.text-justify h4 {
  font-size: 28px; /* Same font size as .product-story h4 */
  margin-top: 30px;
  margin-bottom: 15px;
  color: #333333; /* Darker text color for headings */
}

.text-justify p {
  font-size: 16px; /* Same font size as .product-story .section-text */
  line-height: 1.6;
  color: #555555; /* Darker color for better readability */
  margin-bottom: 20px; /* Space between paragraphs */
}

.intro-part h4 {
  font-size: 26px; /* Title size consistent with other titles */
  margin-top: 20px;
  color: #333333; /* Same darker color */
}

/* Mobile/Tablet Responsive Styling */
@media (max-width: 768px) {
  .section-title h2 {
    font-size: 28px; /* Adjust title font size for smaller screens */
  }

  .intro-image-container img {
    max-width: 100%; /* Make image 100% width on smaller screens */
  }

  .text-justify h4 {
    font-size: 22px;
  }

  .text-justify p {
    font-size: 14px;
  }
}

/* ====================== 
   ENDING OF INTRODUCTION PAGE STYLES 
====================== *//*/*


/* ====================== 
   STARTING OF COMPLETEAGATESETSFORHER-101 PAGE STYLES 
====================== *//*/* Ensure main image is centered and responsive */

#completeagatesetsforher-101 .main-image-container {
    text-align: center;
    margin-bottom: 20px; /* Space between main image and thumbnails */
}

#completeagatesetsforher-101 #main-image-complete-agates {
    width: 100%;
    max-width: 600px; /* Adjust this value as needed for your design */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* For zoom functionality */
}

/* Section title styling */
#completeagatesetsforher-101 h3 {
    margin-bottom: 20px; /* Space below the section title */
    color: #333333; /* Darker color for better readability */
    font-size: 32px; /* Adjust font size as needed */
    text-align: center; /* Center the text */
    margin-top: 10px; /* Add some space above the text */
}

/* Combined section text styling */
#completeagatesetsforher-101 #section-text-complete-agates,
#completeagatesetsforher-101 .section-text {
    font-size: 16px !important; /* Ensure the font size is applied */
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: justify;
    color: #555555; /* Darker color for better readability */
}

/* Image title styling */
#completeagatesetsforher-101 .thumbnail-complete-agates h4 {
    margin-top: 10px; /* Space above the image title */
    font-size: 16px; /* Font size for image titles */
    color: #333333; /* Darker color for image titles */
}

/* Thumbnail Container */
#completeagatesetsforher-101 .thumbnail-container-complete-agates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between thumbnails */
}

/* Ensure thumbnails are displayed correctly */
#completeagatesetsforher-101 .thumbnail-complete-agates {
    display: inline-block;
    width: 120px; /* Fixed width for thumbnails */
    height: 120px; /* Fixed height for thumbnails */
    overflow: hidden;
    cursor: pointer; /* Indicate clickable */
}

#completeagatesetsforher-101 .thumbnail-complete-agates img {
    width: 100%; /* Make image fill the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures image is displayed as a block element */
}

/* Optional zoom effect on hover */
#completeagatesetsforher-101 .thumbnail-complete-agates:hover img {
    transform: scale(1.1); /* Zoom effect */
    transition: transform 0.2s; /* Smooth zoom effect */
}

/* Highlight the active thumbnail */
#completeagatesetsforher-101 .thumbnail-complete-agates.active img {
    border: 2px solid #000; /* Border to highlight active thumbnail */
}

/* Remove any default box around links */
#completeagatesetsforher-101 .image-frame {
    display: block; /* Ensure links behave like block elements */
    text-decoration: none; /* Remove underline */
}

.parallax-section {
    margin-top: 50px; /* Adjust the value as needed */
}

.product-story {
    margin-top: 30px; /* Space above the product story section */
}


/* ====================== 
   ENDING OF COMPLETEAGATESETSFORHER-101 PAGE STYLES 
====================== *//*


/* ====================== 
   STARTING OF SETSFORHER PAGE STYLES 
====================== *//*
/* Custom CSS for the setsforher image grid */
#setsforher .image-grid {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    justify-content: space-between; /* Space between columns */
    margin-top: 20px; /* Space above the image grid */
}

#setsforher .setsforher-thumb {
    flex: 0 1 calc(50% - 20px); /* Two columns with space between */
    margin-bottom: 20px; /* Space between images */
    text-align: center; /* Center the text under each image */
    position: relative; /* Positioning for the zoom effect */
    overflow: hidden; /* Hide overflow on zoom */
}

#setsforher .setsforher-thumb img {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: 500px; /* Optional: limit the maximum height */
    object-fit: contain; /* Adjust image to fit while maintaining aspect ratio */
    border-radius: 5px; /* Slightly rounded corners */
    transition: transform 0.3s ease; /* Smooth zoom effect */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

#setsforher .setsforher-thumb img:hover {
    transform: scale(1.3); /* Zoom in on hover */
}

/* Section title styling */
#setsforher h3 {
    margin-bottom: 20px; /* Space below the section title */
    color: #333333; /* Darker color for better readability */
    font-size: 18px; /* Slightly smaller font size */
    text-align: center; /* Center the text */
    margin-top: 10px; /* Add some space above the text */
}

/* Image title styling */
#setsforher h4 {
    margin-top: 10px; /* Space above the image title */
    font-size: 14px; /* Slightly smaller font size for image titles */
    color: #333333; /* Darker color for better readability */
}

/* Limit the width of the text and center it */
#setsforher .section-text {
    max-width: 1000px; /* Set the maximum width for the text */
    margin: 0 auto; /* Center the text block */
    font-size: 16px; /* Font size for paragraph text */
    line-height: 1.5; /* Increase line spacing for readability */
    color: #555555; /* Text color */
    text-align: justify; /* Keep justified text */
    padding: 0 15px; /* Add padding for smaller screen sizes */
}

/* You can add this to ensure the entire justified div has a max width */
#setsforher .text-container {
    max-width: 1000px; /* Set max width for the entire text area */
    margin: 0 auto; /* Center the content */
    padding: 0 20px; /* Optional: Add some padding to adjust spacing */
}


/* Remove any default box around links */
#setsforher .image-frame {
    display: block; /* Ensure links behave like block elements */
    text-decoration: none; /* Remove underline */
}

.parallax-section {
    margin-top: 50px; /* Adjust the value as needed */
}

.product-story {
    margin-top: 30px; /* Space above the product story section */
}

/* ====================== 
   ENDING OF SETSFORHER PAGE STYLES 
====================== *//*
/* ====================== 
   STARTING OF UNISEXNECKLACES PAGE STYLES 
====================== *//*
/* Ensure main image is centered and responsive */
#unisexnecklaces .main-image-container {
    text-align: center;
    margin-bottom: 20px; /* Space between main image and thumbnails */
}

#unisexnecklaces #main-image-complete-unisexnecklaces {
    width: 60%;
    max-width: 600px; /* Adjust this value as needed for your design */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* For zoom functionality */
}

#unisexnecklaces #section-title-complete-unisexnecklaces {
    font-size: 16px; /* Adjusted title size for better visibility */
    margin: 20px 0;
    text-align: center; /* Center the title */
    color: #333333; /* Darker color for better readability */
}

#unisexnecklaces #section-text-complete-unisexnecklaces {
    font-size: 16px; /* Font size for text */
    margin-bottom: 20px;
    text-align: justify; /* Justify the text */
    line-height: 1.5; /* Improve readability */
    color: #333333; /* Darker color for better readability */
}

/* Thumbnail Container */
#unisexnecklaces .thumbnail-container-complete-unisexnecklaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between thumbnails */
}

/* Ensure thumbnails are displayed correctly */
#unisexnecklaces .thumbnail-complete-unisexnecklaces {
    display: inline-block;
    width: 120px; /* Fixed width for thumbnails */
    height: 120px; /* Fixed height for thumbnails */
    overflow: hidden;
    cursor: pointer; /* Indicate clickable */
}

#unisexnecklaces .thumbnail-complete-unisexnecklaces img {
    width: 100%; /* Make image fill the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures image is displayed as a block element */
}

/* Optional zoom effect on hover */
#unisexnecklaces .thumbnail-complete-unisexnecklaces:hover img {
    transform: scale(1.1); /* Zoom effect */
    transition: transform 0.2s; /* Smooth zoom effect */
}

/* Highlight the active thumbnail */
#unisexnecklaces .thumbnail-complete-unisexnecklaces.active img {
    border: 2px solid #000; /* Border to highlight active thumbnail */
}

/* ====================== 
   ENDING OF UNISEXNECKLACES PAGE STYLES 
====================== *//*


/* ====================== 
   STARTING CSS LUXURYBEADSBRACELETS PAGE STYLES 
====================== *//*
/* Ensure main image is centered and responsive */
#luxurybeadsbracelets .main-image-container {
    text-align: center;
    margin-bottom: 20px; /* Space between main image and thumbnails */
}

#luxurybeadsbracelets #main-image-complete-bracelets {
    width: 60%;
    max-width: 800px; /* Adjust this value as needed for your design */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* For zoom functionality */
}

/* Corrected Selector */
#luxurybeadsbracelets #section-title-complete-luxurybeadsbracelets {
    font-size: 18px; /* Adjusted title size for better visibility */
    margin: 20px 0;
    text-align: center; /* Center the title */
    color: #333333; /* Darker color for better readability */
}

/* Ensure this is applied to the correct section */
#luxurybeadsbracelets #section-text-complete-luxurybeadsbracelets {
    font-size: 18px; /* Font size for text */
    margin-bottom: 20px;
    text-align: justify; /* Justify the text */
    line-height: 1.3; /* Improve readability */
    color: #333333; /* Darker color for better readability */
}

/* Thumbnail Container */
#luxurybeadsbracelets .thumbnail-container-complete-luxurybeadsbracelets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between thumbnails */
}

/* Ensure thumbnails are displayed correctly */
#luxurybeadsbracelets .thumbnail-complete-bracelets { /* Changed class to match HTML */
    display: inline-block;
    width: 120px; /* Fixed width for thumbnails */
    height: 120px; /* Fixed height for thumbnails */
    overflow: hidden;
    cursor: pointer; /* Indicate clickable */
}

#luxurybeadsbracelets .thumbnail-complete-bracelets img { /* Changed class to match HTML */
    width: 100%; /* Make image fill the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures image is displayed as a block element */
}

/* Optional zoom effect on hover */
#luxurybeadsbracelets .thumbnail-complete-bracelets:hover img { /* Changed class to match HTML */
    transform: scale(1.1); /* Zoom effect */
    transition: transform 0.2s; /* Smooth zoom effect */
}

/* Highlight the active thumbnail */
#luxurybeadsbracelets .thumbnail-complete-bracelets.active img { /* Changed class to match HTML */
    border: 2px solid #000; /* Border to highlight active thumbnail */
}

/* ====================== 
   ENDING CSS LUXURYBEADSBRACELETS PAGE STYLES 
====================== *//*

/* ======================
   STARTING OF UNISEXBEADSBRACELETS PAGE STYLES
====================== */

/* Section Title Styles */
#unisexbeadsbracelets .section-title {
    text-align: center; /* Center the title */
    margin-bottom: 40px; /* Space below the title */
}

#unisexbeadsbracelets .section-title h3 {
    font-size: 20px; /* Font size for the section title */
    color: #333333; /* Darker silver platinum */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Paragraph Styles */
#unisexbeadsbracelets .text-style {
    font-size: 22px; /* Font size for paragraphs */
    margin-bottom: 20px; /* Space below paragraphs */
    color: #444; /* Darker color for readability */
    text-align: justify; /* Justified text */
    padding: 0 15px; /* Padding for paragraphs */
}

/* Section Text Complete */
#unisexbeadsbracelets #section-text-complete-unisexbeadsbracelets {
    font-size: 1.6rem; /* Adjust font size as needed */
    line-height: 1.3; /* Increase line height for readability */
    text-align: justify; /* Ensure the text is justified */
    color: #555; /* Consistent description color */
    margin: 0 auto; /* Center align */
    max-width: 1000px; /* Increase maximum width for longer lines */
    margin-bottom: 40px; /* Space below description */
}

/* Image Grid Specific to Unisex Beads Bracelets */
#unisexbeadsbracelets .image-grid {
    display: flex; /* Flexbox layout */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center align the image grid */
    margin-top: 30px; /* Space above image grid */
}

/* Thumbnail Styles Specific to Unisex Beads Bracelets */
#unisexbeadsbracelets .work-thumb {
    flex: 0 0 calc(30% - 10px); /* Adjusted for three columns, accounting for smaller gaps */
    margin: 5px; /* Smaller gap around thumbnails */
    text-align: center; /* Center text */
}

/* Ensure images take full width within the thumbnail */
#unisexbeadsbracelets .work-thumb img {
    width: 100%; /* Responsive images */
    height: auto; /* Maintain aspect ratio */
    border-bottom: 3px solid #A0A0A0; /* Decorative border */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.6); /* White shadow effect */
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

/* Image Zoom Effect */
#unisexbeadsbracelets .work-thumb:hover img {
    transform: scale(1.3); /* Zoom in on hover */
    position: relative; /* Ensure positioning is relative to parent */
    z-index: 1; /* Bring the image above the container */
}

/* Image Title Styles */
#unisexbeadsbracelets h4 {
    margin-top: 15px; /* Space above image titles */
    font-size: 18px; /* Font size for image titles */
    color: #A0A0A0; /* Title color */
}

/* Responsive Styles for Unisex Beads Bracelets */
@media (max-width: 768px) {
    #unisexbeadsbracelets .work-thumb {
        flex: 0 0 calc(50% - 10px); /* Two columns on medium screens with smaller gaps */
    }
}

@media (max-width: 480px) {
    #unisexbeadsbracelets .work-thumb {
        flex: 0 0 100%; /* One column on small screens */
    }
}

/* ======================
   ENDING OF UNISEXBEADSBRACELETS PAGE STYLES
====================== */



/* ====================== 
   STARTING OF COMPLETEAGATESETSFORHER PAGE STYLES 
====================== */

/* Container styling */
#completeagatesetsforher .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Carousel Container */
.carousel {
    display: flex;
    transition: transform 0.6s ease-in-out;
    width: 100%;
}

/* Ensure each image takes full width for sliding */
.carousel-image {
    flex: 0 0 100%;
    position: relative;
}

/* Overlay for Buttons Below the Image */
.carousel-image .overlay {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--overlay-bg); /* Semi-transparent background */
    padding: 10px; /* Add padding for a better look */
    border-radius: 5px; /* Optional: rounded corners */
    display: none; /* Hidden by default */
}

/* Show buttons on hover for desktop */
.carousel-image:hover .overlay {
    display: block;
}

/* 3D Rotating Carousel */
.product-carousel {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

/* Carousel Wrapper */
.carousel-wrapper {
    position: relative;
    width: 60%;
    max-width: 600px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

/* Carousel Image Styles */
.carousel-image img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Carousel Navigation Arrows */
.carousel-prev, .carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: silver; /* Change background to silver */
    color: black; /* Change text color to black */
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 24px;
    border-radius: 50%; /* Keeps the circular shape */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: add a subtle shadow */
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

/* Hover Effects for Thumbnails */
.thumbnail-navigation {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.thumbnail {
    width: 100px;
    height: auto;
    cursor: pointer;
}

.luxury-hover:hover {
    transform: scale(1.1);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Dynamic Parallax Story */
.product-story {
    margin-top: 50px;
    text-align: center;
    padding: 50px 0;
    background: #f0f0f0;
}

.story-part {
    padding: 20px;
    animation: fadeInUp 1s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.story-part h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* Keyframes for Animations */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Title and Description */
.section-title {
    margin-top: 20px;
}

.luxury-title {
    font-size: 24px;
}

.luxury-description {
    font-size: 16px;
}

/* Intro Text Section */
.intro-text {
    padding: 50px 0;
    background: #f0f0f0;
}

.intro-story {
    text-align: center;
    padding: 20px;
}

.intro-part {
    padding: 20px;
    animation: fadeInUp 1s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.intro-part h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

/* Apply similar styling to the .product-story section */
.product-story h4 {
    font-size: 28px; /* Same font size as #unisexbeadsbracelets h3 */
    color: #333333; /* Darker color for better readability */
    text-align: center; /* Center the title */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    margin-bottom: 40px; /* Space below the title */
}

.product-story .section-text {
    font-size: 16px; /* Adjust font size if needed */
    color: #333333; /* Darker color for better readability */
    line-height: 1.5; /* Maintain readable spacing */
    text-align: center; /* Optional: Center-align text */
}

/* Mobile-specific styling */
@media (max-width: 768px) {
    /* Display buttons below images on mobile */
    .carousel-image .overlay {
        position: relative;
        display: block;
        text-align: center;
        margin-top: 10px;
    }

    /* Adjust button size for mobile */
    .button {
        width: 100%;
        padding: 12px;
        font-size: 16px;
        margin-bottom: 10px;
    }

    /* Make the image fully responsive */
    .carousel-image img {
        width: 100%;
    }
}

/* ====================== 
   END OF COMPLETEAGATESETSFORHER PAGE STYLES 
====================== */
/* ======================
   STARTING OF COMPLETESETSFORHER PAGE STYLES
====================== */

/* Ensure main image is centered and responsive */
#completesetsforher .main-image-container {
    text-align: center;
    margin-bottom: 20px; /* Space between main image and thumbnails */
    position: relative; /* For positioning text on top of the image */
}

/* Main image styling */
#completesetsforher #main-image-complete-sets {
    width: 80%;
    max-width: 600px; /* Adjust this value as needed for your design */
    height: auto; /* Maintain aspect ratio */
    cursor: zoom-in; /* Indicate zoom functionality */
    transition: transform 0.3s ease; /* Smooth zoom transition */
}

/* Zoom effect on hover */
#completesetsforher #main-image-complete-sets:hover {
    transform: scale(1.5); /* Zoom level */
}

/* Section title styling */
#completesetsforher #section-title-complete-sets {
    font-size: 1.5em; /* Title size */
    margin: 20px 0;
    text-align: center; /* Center the title */
}

/* Section text styling */
#completesetsforher #section-text-complete-sets {
    font-size: 1.3em; /* Font size for text */
    margin-bottom: 20px;
    text-align: justify; /* Justify the text */
    line-height: 1.3; /* Improve readability */
}

/* Thumbnail Container */
#completesetsforher .thumbnail-container-complete-sets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between thumbnails */
}

/* Ensure thumbnails are displayed correctly */
#completesetsforher .thumbnail-complete-sets {
    display: inline-block;
    width: 120px; /* Fixed width for thumbnails */
    height: 120px; /* Fixed height for thumbnails */
    overflow: hidden;
    cursor: pointer; /* Indicate clickable */
}

/* Thumbnail image styling */
#completesetsforher .thumbnail-complete-sets img {
    width: 100%; /* Make image fill the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures image is displayed as a block element */
}

/* Optional zoom effect on thumbnail hover */
#completesetsforher .thumbnail-complete-sets:hover img {
    transform: scale(1.1); /* Zoom effect */
    transition: transform 0.2s; /* Smooth zoom effect */
}

/* Highlight the active thumbnail */
#completesetsforher .thumbnail-complete-sets.active img {
    border: 2px solid #000; /* Border to highlight active thumbnail */
}

/* Text paragraph alignment */
#completesetsforher #section-text-complete-sets {
    text-align: justify; /* Justify text alignment */
    margin-bottom: 20px; /* Space below the text paragraphs */
}

/* ======================
   BUTTON STYLING (Add to Basket & Buy Now)
====================== */
/* Button Container */
#completesetsforher .button-container {
    display: flex;
    justify-content: center; /* Center the buttons */
    gap: 10px; /* Space between buttons */
    margin-top: 20px; /* Space above the buttons */
}

/* ======================
   ENDING OF COMPLETESETSFORHER PAGE STYLES
====================== */

/* ====================== 
   STARTING OF COLORFULSETS PAGE STYLES 
====================== */

/* Ensure main image is centered and responsive */
#colorfulsets .main-image-container {
  text-align: center;
  margin-bottom: 20px; /* Space between main image and thumbnails */
}

#colorfulsets #main-image-complete-colorfulsets {
  width: 80%;
  max-width: 600px; /* Adjust this value as needed for your design */
  height: auto; /* Maintain aspect ratio */
  cursor: pointer; /* For zoom functionality */
}

#colorfulsets #section-title-complete-colorfulsets {
  font-size: 1em; /* Smaller title size */
  margin: 20px 0;
  text-align: center; /* Center the title */
}

#colorfulsets #section-text-complete-colorfulsets {
  font-size: 1.3em; /* Font size for text */
  margin-bottom: 20px;
  text-align: justify; /* Justify the text */
  line-height: 1.3; /* Improve readability */
}

/* Thumbnail Container */
#colorfulsets .thumbnail-container-complete-colorfulsets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px; /* Space between thumbnails */
}

/* Ensure thumbnails are displayed correctly */
#colorfulsets .thumbnail-complete-colorfulsets {
  display: inline-block;
  width: 120px; /* Fixed width for thumbnails */
  height: 120px; /* Fixed height for thumbnails */
  overflow: hidden;
  cursor: pointer; /* Indicate clickable */
}

#colorfulsets .thumbnail-complete-colorfulsets img {
  width: 100%; /* Make image fill the container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensures image is displayed as a block element */
  transition: transform 0.2s; /* Add transition for smoother effect */
}

/* Optional zoom effect on hover */
#colorfulsets .thumbnail-complete-colorfulsets:hover img {
  transform: scale(1.1); /* Zoom effect */
}

/* Highlight the active thumbnail */
#colorfulsets .thumbnail-complete-colorfulsets.active img {
  border: 2px solid #000; /* Border to highlight active thumbnail */
}

/* Center the main text */
#colorfulsets #section-text-complete-colorfulsets {
  text-align: justify; /* Justify text alignment */
  margin-bottom: 20px; /* Space below the text paragraphs */
}

.zoomable-image {
  transition: transform 0.3s ease; /* Smooth transition for the zoom effect */
  cursor: pointer; /* Change cursor to pointer on hover */
}

.zoomable-image:hover {
  transform: scale(1.2); /* Zoom in on hover */
}

/* Mobile-specific styling */
@media (max-width: 768px) {
  #colorfulsets .thumbnail-complete-colorfulsets {
    width: 80px; /* Adjust thumbnail size for smaller screens */
    height: 80px;
  }
}

/* ====================== 
   END OF COLORFULSETS PAGE STYLES 
====================== */
/* ====================== 
   STARTING OF TOURMALINE PAGE STYLES 
====================== */

/* Ensure main image is centered and responsive */
#tourmaline .main-image-container {
    text-align: center;
    margin-bottom: 20px; /* Space between main image and thumbnails */
}

#tourmaline #main-image-complete-tourmaline {
    width: 100%;
    max-width: 60%; /* Set maximum width to 60% */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* For zoom functionality */
}

#tourmaline #section-title-complete-tourmaline {
    font-size: 1.5em; /* Title size */
    margin: 20px 0;
    text-align: center; /* Center the title */
}

#tourmaline #section-text-complete-tourmaline {
    font-size: 1.3em; /* Font size for text */
    margin-bottom: 20px;
    text-align: justify; /* Justify the text */
    line-height: 1.3; /* Improve readability */
}

/* Thumbnail Container */
#tourmaline .thumbnail-container-complete-tourmaline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between thumbnails */
    margin-bottom: 20px; /* Space below thumbnails */
}

/* Ensure thumbnails are displayed correctly */
#tourmaline .thumbnail-complete-tourmaline {
    display: inline-block;
    width: 120px; /* Fixed width for thumbnails */
    height: 120px; /* Fixed height for thumbnails */
    overflow: hidden;
    cursor: pointer; /* Indicate clickable */
}

#tourmaline .thumbnail-complete-tourmaline img {
    width: 100%; /* Make image fill the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures image is displayed as a block element */
    transition: transform 0.2s; /* Add transition for smooth effects */
}

/* Optional zoom effect on hover */
#tourmaline .thumbnail-complete-tourmaline:hover img {
    transform: scale(1.1); /* Zoom effect */
}

/* Highlight the active thumbnail */
#tourmaline .thumbnail-complete-tourmaline.active img {
    border: 2px solid #000; /* Border to highlight active thumbnail */
}

/* Mobile-specific styling */
@media (max-width: 768px) {
    #tourmaline #main-image-complete-tourmaline {
        max-width: 100%; /* Full width on mobile */
    }

    #tourmaline .thumbnail-complete-tourmaline {
        width: 80px; /* Adjust thumbnail size for mobile */
        height: 80px;
    }
}

/* ====================== 
   END OF TOURMALINE PAGE STYLES 
====================== */
/* ====================== 
   STARTING OF LUXURYBRACELETS PAGE STYLES 
====================== */
/* Section Title Styles */
#luxurybracelets .section-title {
    text-align: center; /* Center the title */
    margin-bottom: 20px; /* Space below the title */
}

#luxurybracelets .section-title h3 {
    font-size: 22px; /* Font size for the section title */
    color: #333333; /* Darker color */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    margin-bottom: 20px; /* Space below the title */
}

/* Adjust text width to match images */
#luxurybracelets #section-text-complete-luxurybracelets {
    font-size: 16px; /* Font size for text */
    margin-bottom: 20px; /* Space below the paragraph */
    text-align: justify; /* Justify the text */
    line-height: 1.3; /* Improve readability */
    color: #333333; /* Darker color for better readability */
    padding: 0 15px; /* Padding for text */
    max-width: 1050px; /* Set maximum width for the text */
    margin: 0 auto; /* Center the text */
}

/* Image Grid */
#luxurybracelets .image-grid {
    display: flex; /* Flexbox layout */
    flex-wrap: wrap; /* Allow wrapping */
    justify-content: center; /* Center align the image grid */
    margin-top: 30px; /* Space above image grid */
}

/* Thumbnail Styles */
#luxurybracelets .work-thumb {
    flex: 0 0 calc(30% - 10px); /* Adjusted for three columns */
    margin: 5px; /* Space around thumbnails */
    text-align: center; /* Center text */
}

/* Ensure images take full width within the thumbnail */
#luxurybracelets .work-thumb img {
    width: 100%; /* Responsive images */
    height: auto; /* Maintain aspect ratio */
    border-bottom: 3px solid #A0A0A0; /* Decorative border */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.6); /* White shadow effect */
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

/* Image Zoom Effect */
#luxurybracelets .work-thumb:hover img {
    transform: scale(1.3); /* Zoom in on hover */
    position: relative; /* Ensure positioning is relative to parent */
    z-index: 1; /* Bring the image above the container */
}

/* Image Title Styles */
#luxurybracelets h4 {
    margin-top: 15px; /* Space above image titles */
    font-size: 18px; /* Font size for image titles */
    color: #A0A0A0; /* Title color */
}

/* Responsive Styles */
@media (max-width: 768px) {
    #luxurybracelets .work-thumb {
        flex: 0 0 calc(50% - 10px); /* Two columns on medium screens */
    }
}

@media (max-width: 480px) {
    #luxurybracelets .work-thumb {
        flex: 0 0 100%; /* One column on small screens */
    }
}

/* ====================== 
   END OF LUXURYBRACELETS PAGE STYLES 
====================== */
/* ====================== 
   STARTING OF GALLERY PAGE STYLES 
====================== */

/* General body and HTML styling */

/* General body and HTML styling */

/* Starting CSS for Galleries Small screen */
/* Responsive Styles for Small Screens */
@media (max-width: 768px) {
    .gallery-page .main-image {
        height: auto; /* Allow the image to adjust in height based on screen size */
        max-height: 100vh; /* Allow it to fill the viewport height */
    }
.gallery-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.gallery-page h2 {
    font-size: 24px; /* Specific to gallery */
}

.gallery-page .thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Common Reset */
html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Title Styling */
.gallery-page h2 {
    font-size: 18px; /* Adjust to make the title smaller */
    margin-top: 10px; /* Reduce space between main image and title */
    text-align: center; /* Center the title */
}

/* Gallery Page Styles */
.gallery-page {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content */
    min-height: 100vh; /* Ensure it takes at least full viewport height */
    justify-content: space-between; /* Space between header and footer */
    padding: 20px; /* Add padding for better spacing */
}

/* Logo Styling */
.gallery-page .logo img {
    max-width: 100%; /* Use full width of the screen */
    width: auto; /* Allow the logo to scale correctly */
    height: auto; /* Maintain aspect ratio */
    max-height: 200px; /* Set a maximum height for the logo */
    display: block;
    margin: 0 auto; /* Center the logo */
}

/* Main Image Container */
.gallery-page .main-image-container {
    width: 100%; /* Full width */
    text-align: center; /* Center the main image */
    margin-top: -100px; /* Adjust this value to move the image up */
    padding: 0; /* Remove any padding if necessary */
}

/* Main Image Styling */
.gallery-page .main-image {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    max-height: 500px; /* Limit max height for larger displays */
    object-fit: cover; /* Maintain aspect ratio and cover the area */
    border: 2px solid #ddd;
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

/* Product Details Container */
.gallery-page .product-details-container {
    max-width: 100%; /* Use full width on mobile */
    text-align: left; /* Align text to the left */
}

/* Thumbnails section */
.gallery-page .thumbnails {
    display: flex;
    justify-content: center; /* Center the thumbnails */
    flex-wrap: wrap; /* Allows thumbnails to wrap if they overflow */
    gap: 10px; /* Adds spacing between thumbnails */
    margin-top: 20px;
}

/* Thumbnail Styling */
.gallery-page .thumbnails img {
    width: 100px; /* Fixed width for thumbnails */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* Clickable images */
    border: 2px solid #ccc; /* Optional: border around thumbnails */
    border-radius: 4px; /* Optional: rounded corners */
    transition: transform 0.2s ease-in-out; /* Optional: smooth transition for hover */
}

/* Footer */
.gallery-page footer {
    text-align: center;
    padding: 20px;
    background-color: #f1f1f1; /* Footer background color */
    border-top: 1px solid #ccc; /* Optional: border to distinguish footer */
}

/* Footer Text */
.gallery-page footer p {
    font-size: 14px; /* Font size for footer text */
    color: #727171; /* Footer text color */
}

/* Button styles */
.gallery-page .btn,
.gallery-page .back-button {
    padding: 6px 12px; /* Button padding */
    background-color: #7a7a7a; /* Button background color */
    color: white; /* Button text color */
    text-decoration: none;
    border-radius: 3px; /* Button border-radius */
    border: none; /* Remove borders */
    transition: background-color 0.3s ease; /* Button transition */
    margin: 5px 5px; /* Add space between buttons */
}

    .gallery-page .thumbnails {
        flex-direction: column; /* Stack thumbnails vertically */
        width: 100%; /* Full width for thumbnails */
    }

    .gallery-page .thumbnails img {
        width: 100%; /* Thumbnails take full width on small screens */
        height: auto; /* Maintain aspect ratio */
        margin: 0; /* Remove margin */
    }

    /* Buttons larger for touch interaction */
    .gallery-page .btn,
    .gallery-page .back-button {
        font-size: 14px; /* Adjust font size */
        padding: 10px 15px; /* Increase padding */
    }
}
/* Ending CSS for Galleries Small screen */


html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Styles for Index Page */
.index-page {
    overflow-y: auto; /* Allow vertical scrolling on the index page */
    position: relative; /* Allow normal flow */
    min-height: 100vh; /* Ensures it takes at least full viewport height */
}

/* Apply this specifically for gallery pages */
.gallery-page {
    scroll-behavior: smooth; /* Smooth scrolling effect */
    position: fixed; /* Fix position of gallery pages */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Fill the entire viewport */
    overflow-y: auto; /* Allow vertical scrolling */
    z-index: 10; /* Ensure it appears above other content if necessary */
}

/* Container for the main image and details */
.gallery-page .product-display {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start; /* Align items to the top */
}

/* Main Image Container */
.gallery-page .main-image-container {
    flex: 0 0 40%; /* Keep as is */
    text-align: center;
}

/* Main Image Styling */
.gallery-page .main-image {
    max-width: 100%; /* Ensure it fits its container */
    height: auto;
    border: 2px solid #ddd;
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

.gallery-page .main-image:hover {
    transform: scale(1.3); /* Zoom in effect on hover */
}

/* Product Details Container */
.gallery-page .product-details-container {
    flex: 0 0 55%; /* Give more width to the text container */
    margin-left: 10px; /* Keep close to the image */
    max-width: 600px; /* Set a maximum width to prevent horizontal stretching */
    padding-right: 20px; /* Add some padding to the right */
}

/* Product Details Styling */
.gallery-page .product-details {
    margin-top: 0; /* Remove top margin for closeness */
}

.gallery-page .product-details h2 {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 10px;
    white-space: normal; /* Allow wrapping */
    overflow-wrap: break-word; /* Ensure long words break to fit */
}

.gallery-page .product-details p {
    font-size: 16px;
    line-height: 1.3; /* Improved readability */
    white-space: normal; /* Allow wrapping */
}

/* Adjust description specifically */
#description {
    margin-top: 20px; /* Space between price and description */
    max-height: none; /* Remove max-height to allow full display */
    overflow: hidden; /* Hide overflow content if needed */
    padding-right: 10px; /* Add some padding to the right */
}

/* Styles for All Buttons */
.gallery-page .btn, .gallery-page .back-button {
    display: inline-block;
    padding: 5px 10px;
    margin-left: 10px; /* Space between buttons */
    background-color: lightgrey; /* Default background color */
    color: black; /* Text color */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Smooth transition */
}

.gallery-page .btn:hover, .gallery-page .back-button:hover {
    background-color: darkgrey; /* Background color on hover */
}

.gallery-page .btn:focus, .gallery-page .back-button:focus {
    outline: 2px solid #000; /* Visual cue for keyboard navigation */
}

/* Thumbnails section */
.gallery-page .thumbnails {
    display: flex;
    justify-content: center; /* Centers the thumbnails horizontally */
    flex-wrap: wrap; /* Allows thumbnails to wrap if they overflow the page width */
    gap: 10px; /* Adds spacing between thumbnails */
    margin-top: 20px;
}

.gallery-page .thumbnails img {
    width: 150px; /* Set a fixed width for thumbnails */
    height: auto; /* Maintain the aspect ratio of the images */
    cursor: pointer; /* Makes the images clickable */
    border: 2px solid #ccc; /* Optional: Add a border around the thumbnails */
    border-radius: 4px; /* Optional: Add rounded corners */
    transition: transform 0.2s ease-in-out; /* Optional: Smooth transition for hover effect */
}

.gallery-page .thumbnails img:hover {
    transform: scale(1.05); /* Optional: Slight zoom effect on hover */
}

/* Footer */
.gallery-page footer {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    background-color: #f1f1f1;
    border-top: 1px solid #ccc; /* Optional: border to distinguish footer */
}

.gallery-page footer p {
    font-size: 14px;
    color: #727171;
}

/* Active Thumbnail */
.thumbnails img.active {
    border: 2px solid #000000; /* Change border color for active thumbnail */
}

/* Price Styling */
.price {
    font-size: 14px; /* Adjust font size if needed */
    color: #333; /* Change color if desired */
    margin-left: 5px; /* Add space between "Price:" and "AED/7,300" */
}

/* ====================== 
   END OF GALLERY PAGE STYLES 
====================== */
#mixnaturalstone .image-title {
    font-family: 'Arial', sans-serif; /* Use a standard font */
    font-size: 16px; /* Adjust size as needed */
    text-align: center; /* Center the title */
    color: #333333; /* Title color */
    margin-top: 5px; /* Space above title */
}

.product-title {
    font-family: 'Arial', sans-serif; /* Use Arial or another font */
    font-size: 16px; /* Adjust to a suitable size */
    color: #333333; /* Darker color for readability */
    text-align: center; /* Center the product title */
}

/*====================== 
   STARTING OF BEADS PAGE STYLES 
====================== */

/* BEADSKINDS SECTION STYLES */

/* Ensure the section has padding */
#beadskinds #section-text-complete-beadskinds {
    padding: 40px 15px; /* Adjust as needed */
}

/* Title styling */
#beadskinds #section-text-complete-beadskinds .section-title h3 {
    font-size: 1.5rem; /* Title size */
    font-weight: 600; /* Bold */
    color: #2c3e50; /* Title color */
    text-align: center; /* Center align */
    margin-bottom: 20px; /* Space below */
    text-transform: uppercase; /* Optional: Transform to uppercase */
}

/* Description styling */
#beadskinds #section-text-complete-beadskinds .description {
    font-size: 1.6rem; /* Adjust as needed */
    color: #333; /* Dark grey for readability */
    line-height: 1.3; /* Improve readability */
    text-align: justify; /* Justify text for better alignment */
    margin-top: 20px; /* Space between title and description */
}

/* Flexbox-based Image Grid Layout */
#beadskinds #section-text-complete-beadskinds .image-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px; /* Gap between items */
    margin-top: 40px; /* Space above the image grid */
}

/* Image grid items */
#beadskinds #section-text-complete-beadskinds .work-thumb {
    flex: 1 1 calc(25% - 20px); /* 4 images per row */
    max-width: calc(25% - 20px); /* Ensure it doesn't exceed this */
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Images inside the grid */
#beadskinds #section-text-complete-beadskinds .work-thumb img {
    width: 100%; /* Ensure image fills container */
    height: auto;
}

/* Text under images */
#beadskinds #section-text-complete-beadskinds .work-thumb h4,
#beadskinds #section-text-complete-beadskinds .work-thumb p {
    margin-top: 10px;
}

/* Hover Effect on Images */
#beadskinds #section-text-complete-beadskinds .work-thumb img:hover {
    transform: scale(1.05); /* Slight zoom effect */
    transition: transform 0.3s ease; /* Smooth transition */
}

/* Media Queries for smaller screens */
@media (max-width: 768px) {
    #beadskinds #section-text-complete-beadskinds .work-thumb {
        flex: 1 1 calc(50% - 20px); /* Two columns for tablets */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 576px) {
    #beadskinds #section-text-complete-beadskinds .work-thumb {
        flex: 1 1 100%; /* One column for mobile */
        max-width: 100%;
    }

    /* Responsive Text Sizing */
    #beadskinds #section-text-complete-beadskinds .description {
        font-size: 1.4rem; /* Slightly smaller text for mobile */
    }
}

/*====================== 
   ENDING OF BEADS PAGE STYLES 
====================== */
#ournaturalstone .section-title h3 {
    font-size: 2.0rem; /* Adjust to match your existing page */
    font-weight: 700; /* Same weight as previous titles */
    color: #2c3e50; /* Same color as previous titles */
    text-align: center; /* Center-align the title */
    margin-bottom: 30px; /* Space below the title */
}

#ournaturalstone .description {
    font-size: 1.6rem; /* Adjust font size to match */
    line-height: 1.3; /* Maintain line height for readability */
    text-align: justify; /* Justify text for a cleaner look */
    color: #555; /* Same color for the description text */
    margin: 0 auto; /* Center align within its container */
    max-width: 1000px; /* Maintain max width as in previous pages */
    margin-bottom: 40px; /* Space below the description */
}
#agatenaturalstone .section-title h3 {
    font-size: 2.0rem; /* Adjust to match your existing page */
    font-weight: 700; /* Same weight as previous titles */
    color: #2c3e50; /* Same color as previous titles */
    text-align: center; /* Center-align the title */
    margin-bottom: 30px; /* Space below the title */
}

#agatenaturalstone .description {
    font-size: 1.6rem; /* Adjust font size to match */
    line-height: 1.3; /* Maintain line height for readability */
    text-align: justify; /* Justify text for a cleaner look */
    color: #555; /* Same color for the description text */
    margin: 0 auto; /* Center align within its container */
    max-width: 1000px; /* Maintain max width as in previous pages */
    margin-bottom: 40px; /* Space below the description */
}

/* Add any additional styling that matches previous sections */
#amethyststones .section-title h3 {
    font-size: 2.0rem; /* Adjust as needed */
    font-weight: 700; /* Same weight for consistency */
    color: #2c3e50; /* Title color */
    text-align: center; /* Center-align the title */
    margin-bottom: 30px; /* Space below the title */
}

#amethyststones .description {
    font-size: 1.6rem; /* Description font size */
    line-height: 1.3; /* Line height for readability */
    text-align: justify; /* Justify text */
    color: #555; /* Description text color */
    margin: 0 auto; /* Center align within container */
    max-width: 1000px; /* Maximum width */
    margin-bottom: 40px; /* Space below the description */
}
#mixnaturalstone .section-title h3 {
    font-size: 2.0rem; /* Consistent title size */
    font-weight: 700; /* Title weight */
    color: #2c3e50; /* Same color */
    text-align: center; /* Center title */
    margin-bottom: 30px; /* Space below title */
}

#mixnaturalstone .description {
    font-size: 1.6rem; /* Consistent description size */
    line-height: 1.3; /* Line height for clarity */
    text-align: justify; /* Justified text */
    color: #555; /* Description color */
    margin: 0 auto; /* Center alignment */
    max-width: 1000px; /* Max width */
    margin-bottom: 40px; /* Space below description */
}
/* Title Styling */
#rosary .section-title h3 {
    font-size: 2.0rem; /* Same font size */
    font-weight: 700; /* Consistent weight */
    color: #2c3e50; /* Title color */
    text-align: center; /* Center-align the title */
    margin-bottom: 30px; /* Space below the title */
}


/* New Section Text Styling */
#rosary #section-text-complete-rosary {
    font-size: 1.6rem; /* Adjust font size as needed */
    line-height: 1.3; /* Increase line height for readability */
    text-align: justify; /* Ensure the text is justified */
    color: #555; /* Consistent description color */
    margin: 0 auto; /* Center align */
    max-width: 1000px; /* Increase maximum width for longer lines */
    margin-bottom: 40px; /* Space below description */
}

/* Main Image Container */
#uniquesetsforher .main-image-container {
    text-align: center;
    margin-bottom: 20px; /* Space between main image and thumbnails */
}

#uniquesetsforher #main-image-complete-uniquesetsforher {
    width: 100%;
    max-width: 600px; /* Adjust this value as needed for your design */
    height: auto; /* Maintain aspect ratio */
    cursor: pointer; /* For zoom functionality */
}

/* Section title styling */
#uniquesetsforher h3 {
    margin-bottom: 20px; /* Space below the section title */
    color: #333; /* Darker color for better readability */
    font-size: 20px; /* Adjust font size as needed */
    text-align: center; /* Center the text */
    margin-top: 10px; /* Add some space above the text */
}

/* Combined section text styling */
#uniquesetsforher #section-text-complete-uniquesetsforher,
#uniquesetsforher .section-text {
    font-size: 16px !important; /* Ensure the font size is applied */
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: justify;
    color: #555; /* Darker color for better readability */
}

/* Thumbnail Container */
#uniquesetsforher .thumbnail-container-complete-uniquesetsforher {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* Space between thumbnails */
}

/* Thumbnail Styles */
#uniquesetsforher .thumbnail-complete-uniquesetsforher {
    width: 120px; /* Fixed width for thumbnails */
    height: 120px; /* Fixed height for thumbnails */
    overflow: hidden;
    cursor: pointer; /* Indicate clickable */
    display: inline-block;
}

#uniquesetsforher .thumbnail-complete-uniquesetsforher img {
    width: 100%; /* Make image fill the container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures image is displayed as a block element */
}

/* Zoom effect on hover */
#uniquesetsforher .thumbnail-complete-uniquesetsforher:hover img {
    transform: scale(1.1); /* Zoom effect */
    transition: transform 0.2s; /* Smooth zoom effect */
}

/* Highlight active thumbnail */
#uniquesetsforher .thumbnail-complete-uniquesetsforher.active img {
    border: 2px solid #000; /* Border to highlight active thumbnail */
}

/* Remove default link decoration */
#uniquesetsforher .image-frame {
    display: block; /* Ensure links behave like block elements */
    text-decoration: none; /* Remove underline */
}

/* Section margins */
.parallax-section {
    margin-top: 50px;
}

.product-story {
    margin-top: 30px;
}