/** Shopify CDN: Minification failed

Line 209:10 Expected identifier but found whitespace
Line 209:12 Unexpected "{"
Line 209:21 Expected ":"
Line 228:10 Expected identifier but found whitespace
Line 228:12 Unexpected "{"
Line 228:21 Expected ":"

**/
/* General Quiz Container Styles */



#custom-quiz {
    /* Custom Quiz Section Styling */
}

#custom-quiz .video-content {
    position: relative;
    overflow: hidden; /* Prevent overflow */
    animation: fadeIn 3s ease-in-out 0.5s both;
    margin-left: 20px;
}

#custom-quiz .video-custom {
    position: relative;
    z-index: 1;
}

/* Border for video */
#custom-quiz .video-custom::before {
    max-width: 90%;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0%;
    z-index: -1;
    border: var(--sti-border-focus);
    border-radius: 0px 0px 150px 0px; /* Default for small screens */
    overflow: visible;
}

#custom-quiz .video-wrapper video {
    width: auto;
    height: auto;
    box-sizing: border-box;
    border-radius: 0px  0px 150px 0px; /* Default for small screens */
    object-fit: cover;
    object-position: center;
    padding-bottom: 20px;
}

@media (min-width: 576px) {
    #custom-quiz .video-custom::before,
    #custom-quiz .video-wrapper video {
        border-radius: 0px 0px 160px  0px;
    }
}

@media (min-width: 1200px) {
    #custom-quiz .video-custom::before,
    #custom-quiz .video-wrapper video {
        border-radius: 0px 0px 190px 0px;
    }
}

@media (min-width: 1400px) {
    #custom-quiz .video-custom::before,
    #custom-quiz .video-wrapper video {
        border-radius: 0px 0px 320px 0px;
    }
}

@media (min-width: 1600px) {
    #custom-quiz .video-custom::before,
    #custom-quiz .video-wrapper video {
        border-radius: 0px 0px 300px 0px;
    }
}

#custom-quiz .video-wrapper {
    position: relative;
    z-index: 1;
    max-width: 90%;
    overflow: hidden; /* Prevent overflow */
}

/* Additional breakpoints for responsiveness */
@media (max-width: 576px) {
    #custom-quiz .video-wrapper {
        transform: translateX(10px);
    }
    #custom-quiz .video-wrapper video {
        padding-bottom: 10px;
    }
}

@media (min-width: 576px) {
    #custom-quiz .video-wrapper {
        transform: translateX(5px);
    }
    #custom-quiz .video-wrapper video {
        padding-bottom: 5px;
    }
}

@media (min-width: 768px) {
    #custom-quiz .video-wrapper {
        transform: translateX(10px);
    }
    #custom-quiz .video-wrapper video {
        padding-bottom: 10px;
    }
}

@media (min-width: 992px) {
    #custom-quiz .video-wrapper {
        transform: translateX(15px);
    }
    #custom-quiz .video-wrapper video {
        padding-bottom: 15px;
    }
}

@media (min-width: 1200px) {
    #custom-quiz .video-wrapper {
        transform: translateX(20px);
    }
    #custom-quiz .video-wrapper video {
        padding: 20px 0;
    }
}

@media (min-width: 1400px) {
    #custom-quiz .video-wrapper {
        transform: translateX(20px);
    }
    #custom-quiz .video-wrapper video {
        padding: 20px 0;
    }
}

/* Keyframes for Fade-In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.quiz-container {
    width: 100%; /* Full width for the quiz */
    height: auto; /* Fixed height for the quiz */
    margin: 0 auto; /* Center the quiz */
    padding: 10px; /* General padding */
    background-color: #D2CFAE;
    opacity: 1; /* Fully visible */
    transition: opacity 1s ease-in-out; /* Smooth transition for visibility */
    overflow: hidden; /* Prevent overflow in the container */
    position: relative; /* Required for absolute positioning of the reset button */
}

.quiz-header-container {
    position: sticky; /* Makes the header sticky within the quiz-container */
    top: 0;}

#custom-quiz .row.row-mtm.align-items-lg-center {
    width: 1300px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Quiz Frame Styles */
.quiz-frame {
    display: flex;
    flex-direction: column; /* Stack header and content vertically */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Start from the top */
    box-sizing: border-box; /* Ensure padding is included in total width/height */
    height: calc(100% - 60px); /* Adjust height to leave space for the reset button */
    overflow-y: auto; /* Enable vertical scrolling for the frame */
}

/* Header Styles */
.quiz-header {
    text-align: left; /* Center align the header */
    margin-bottom: 0px; /* Space below the header */
    margin-left:20px;

   
}

.quiz-title {
    font-size: 36px; /* Set font size for the title */
    font-family: 'Playfair Display', serif; /* Use the theme font */
    margin: 0; /* Remove default margin */
}

.quiz-description {
    font-size: 18px; /* Set a default size for the description */
    color: {{ section.settings.quiz_description_color }}; /* Use dynamic color setting */
    margin: 0; /* Remove default margin */
    padding-bottom: 15px; /* Reduced space below the description */
}

/* Frame Styles */
.frame-section {
    margin-bottom: 0px; /* Space below each frame section */
}

.frame1{
height: auto !important;
  display: flex !important;
padding-bottom:20px;
}

/* Frame 1 Styles */
.frame1-section-heading {
    margin-bottom: 15px; /* Space below the question */
    color: {{ section.settings.frame1_title_color }}; /* Use dynamic color setting */
    font-size: 33px;
    
text-transform: none; /* Prevent automatic capitalization */
    font-family: 'Playfair Display', serif; /* Use the theme font */
    margin-top:0px;
    padding-top:0px;
align-items: flex-start;
}

/* Frame 1 Options Styles */
.frame1-options {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of options */
    justify-content: left; /* Align options to the left */
    align-items: flex-start; /* Align items to the start of the flex container */
    gap: 20px; /* Add space between buttons */
}

/* Adjust the button widths for each row */
.frame1-options .col-6 {
    flex-basis: 30%; /* Ensure buttons take up 30% width for 3 items per row */
}

/* Row 3 has only 2 options, so they will take 45% width */


/* Adjust Frame 1 Button Styles */
.frame1-quiz-button {
    display: inline-block;
    width: 100%; /* Ensure buttons take full width of their column */
    padding: 10px 0;
    text-decoration: none;
    color: #fff;
    background-color: #6C6948;
    
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.3s, transform 0.3s;
    align-items: center;
}

.frame1-quiz-button:hover {
    background-color: #393631;
    transform: scale(1.05);
}
/* Frame 1 Image Styles */
.frame1-custom-img {
    display: flex; /* Use flex to center the image */
    justify-content: center; /* Center horizontally */
   /* Remove any top margin */
  margin-left:20px;
  margin-top:3px;
}

.frame1-custom-img img {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area */
    margin-left:20px;
  
  
}

/* Reset Button Styles */
.quiz-reset-container {
    position: relative; /* Fix the reset button's position */
    bottom: 20px; /* Space from the bottom of the container */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust centering */
    text-align: center; /* Center-align the reset button text */
    margin-top: 10px; /* Reduced space above the reset button */
}

.quiz-reset-container .quiz-reset {
    display: inline-block; /* Allows the button to be centered as an inline-block */
    width: 150px; /* Set a fixed width for the button */
    padding: 10px 0; /* Vertical padding */
    text-decoration: none; /* Remove underline from text */
    color: #6C6948; /* Default text color */
    background-color: transparent; /* Transparent background */
    border: 1px solid #6C6948; /* Border around the button */
    font-size: 16px; /* Font size */
    white-space: nowrap; /* Prevent text from wrapping */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Hover effect */
    text-align: center; /* Center text inside the button */
}

.quiz-reset-container .quiz-reset:hover {
    background-color: #6C6948; /* Solid color on hover */
    color: #fff; /* Change text color to white when hovered */
    transform: scale(1.05); /* Slightly enlarge on hover */
}


/* Frame 2 Specific Styles */
#frame2 {
    display: none; /* Initially hide Frame 2 */
}

/* Frame 2 Section Heading */
.frame2-section-heading {
    margin-bottom: 15px; /* Space below the question */
    color: #6C6948; /* Use Frame 1 title color for consistency */
    font-size: 33px;
    text-transform: none; /* Prevent automatic capitalization */
    font-family: 'Playfair Display', serif; /* Use the theme font */
}

/* Frame 2 Options Styles */
.frame2-options {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    gap: 20px; /* Reduced gap between buttons */
    justify-content: flex-start; /* Align options to the left */
    align-items: flex-start; /* Align items at the start of the flex container */
}

/* Frame 2 Button Styles */
.frame2-quiz-button {
    display: inline-block;
    padding: 10px 20px; /* Adjust padding to provide more space around text */
    max-width: 100%; /* Set a max width for buttons to prevent them from stretching too far */
    text-decoration: none;
    color: #fff; /* Button text color */
    background-color: #6C6948; /* Default button background for Frame 2 */
      border: 1px solid #6C6948; /* Border around the button */
    font-size: 16px; /* Font size */
    text-align: center; /* Center text inside the button */
    white-space: nowrap; /* Prevent text from wrapping to multiple lines */
    overflow: hidden; /* Hide any overflow text */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
    transition: background-color 0.3s, transform 0.3s; /* Add transition for smooth hover effects */
}

.frame2-quiz-button:hover {
    background-color: #393631; /* Change background on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}
.frame2-quiz-reset {
background-color: transparent; /* Transparent background */
    border: 1px solid #6C6948; /* Border around the button */
    display: inline-block;
    padding: 10px 20px; /* Adjust padding to provide more space around text */
    max-width: 100%; /* Set a max width for buttons to prevent them from stretching too far */
    text-decoration: none;
    color: #6C6948; /* Button text color */
    
    font-size: 16px; /* Font size */
    text-align: center; /* Center text inside the button */
    white-space: nowrap; /* Prevent text from wrapping to multiple lines */
    overflow: hidden; /* Hide any overflow text */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
    transition: background-color 0.3s, transform 0.3s; /* Add transition for smooth hover effects */
}

/* Hover Effect for Reset Button */
.frame2-quiz-reset:hover {
    background-color: #393631; /* Change background color on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}
/* Frame 2 Image Styles */
.frame2-custom-img {
    display: flex; /* Use flex to center the image */
    justify-content: center; /* Center horizontally */
    margin-top: 0; /* Remove any top margin */
}

.frame2-custom-img img {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area */
}

/* Frame 3 Specific Styles */
frame3 {
    display: none; /* Initially hide Frame 3 */
}

/* Frame 3 Section Heading */
.frame3-section-heading {
    margin-bottom: 15px; /* Space below the question */
    color: #6C6948; /* Dynamic color for Frame 3 title */
    font-size: 33px;
    text-transform: none; /* Prevent automatic capitalization */
    font-family: 'Playfair Display', serif; /* Use theme font */
}

/* Frame 3 Options Styles */
.frame3-options {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    gap: 20px; /* Space between buttons */
    justify-content: flex-start; /* Align options to the left */
    align-items: flex-start; /* Align items at the start of the flex container */
}

/* Frame 3 Button Styles */
.frame3-quiz-button {
    display: inline-block;
    width: 150px; /* Set a consistent button width */
    padding: 10px 0; /* Vertical padding */
    text-decoration: none;
    color: #fff; /* Button text color */
    background-color: #6C6948; /* Default button background for Frame 3 */
    /* Rounded corners */
    font-size: 16px; /* Font size */
    text-align: center; /* Center text inside the button */
    white-space: nowrap; /* Prevent text from wrapping */
    transition: background-color 0.3s, transform 0.3s; /* Smooth hover effects */
}

.frame3-quiz-button:hover {
    background-color: #393631; /* Change background on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}

/* Frame 3 Image Styles */
.frame3-custom-img {
    display: flex; /* Center the image using flex */
    justify-content: center; /* Center horizontally */
    margin-top: 0; /* Remove top margin */
}

.frame3-custom-img img {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area */
}

frame4 {
    display: none; /* Initially hide Frame 4 */
}

/* Frame 4 Section Heading */
.frame4-section-heading {
    margin-bottom: 15px; /* Space below the question */
   color: #6C6948; /* Use dynamic color setting for title */
    font-size: 33px; /* Dynamic font size for question */
    text-transform: none; /* Prevent automatic capitalization */
    font-family: 'Playfair Display', serif; /* Use the theme font */
}

/* Frame 4 Options Styles */
.frame4-options {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line */
    gap: 10px; /* Space between buttons */
    justify-content: flex-start; /* Align buttons to the start */
    align-items: flex-start; /* Align items at the start of the flex container */
}

.frame4-quiz-button {
    display: inline-block; /* Allow the button to take width based on content */
    padding: 10px 20px; /* Add padding for better spacing */
    text-decoration: none; /* Remove underline */
    color: #fff; /* Button text color */
    background-color: #6C6948; /* Default button background for Frame 4 */
     /* Rounded corners */
    font-size: 16px; /* Font size */
    text-align: center; /* Center text inside the button */
    white-space: nowrap; /* Prevent text from wrapping */
    transition: background-color 0.3s, transform 0.3s; /* Smooth hover effects */
    margin-bottom: 10px; /* Add bottom margin for vertical spacing */
   
    flex-grow: 1; /* Allow buttons to grow equally */
    flex-shrink: 1; /* Allow buttons to shrink equally */
}


.frame4-quiz-button:hover {
    background-color: #393631; /* Change background on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}
/* Frame 4 Reset Button Container */



/* Frame 4 Reset Button Style */
.frame4-quiz-reset {
    background-color: transparent; /* Transparent background */
    border: 1px solid #6C6948; /* Border around the button */
  display: inline-block; /* Allow the button to take width based on content */
    padding: 10px 20px; /* Add padding for better spacing */
    text-decoration: none; /* Remove underline */
    color: #6C6948; /* Button text color */
   
     /* Rounded corners */
    font-size: 16px; /* Font size */
    text-align: center; /* Center text inside the button */
    white-space: nowrap; /* Prevent text from wrapping */
    transition: background-color 0.3s, transform 0.3s; /* Smooth hover effects */
    margin-bottom: 10px; /* Add bottom margin for vertical spacing */
   
    
    
}

/* Hover Effect for Frame 4 Reset Button */
.frame4-quiz-reset:hover {
    background-color: #393631; /* Darker background on hover */
    transform: scale(1.05); /* Slightly enlarge button */
}

/* Frame 4 Image Styles */
.frame4-custom-img {
    display: flex; /* Use flex to center the image */
    justify-content: center; /* Center horizontally */
    margin-top: 0; /* Remove any top margin */
}

.frame4-custom-img img {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area */
}

#frame5 {
    display: none; /* Initially hide Frame 5 */
}


/* Frame 5 Section Heading */
.frame5-section-heading {
    margin-bottom: 5px; /* Space below the question */
    color: #6C6948;; /* Use dynamic color setting */
    font-size: 33px;
    
text-transform: none; /* Prevent automatic capitalization */
    font-family: 'Playfair Display', serif; /* Use the theme font */
    margin-top:0px;
    padding-top:0px;
align-items: flex-start;
}

/* Frame 5 Product Image */
.frame5-product-image {
    display: flex; /* Use flex to center the image */
    justify-content: center; /* Center horizontally */
   /* Remove any top margin */
  margin-left:20px;
  margin-top:3px;
}


/* Frame 5 Product Image */
.frame5-product-image img {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Cover the area */
    margin-left:20px;
}

/* Force the image container to take full column height */

/* Frame 5 Product Information */
.frame5-product-header {
    font-size: 24px; /* Header font size */
    font-weight: bold; /* Bold text */
    text-align: left; /* Align text to the left */
    color: #6C6948; /* Dynamic color */
}

.frame5-product-description {
    font-size: 18px; /* Description font size */
    color: #6C6948; /* Dynamic color */
    margin-top: 5px; /* Space above the description */
    text-align: left; /* Align text to the left */
}

.frame5-product-extra-description {
font-size: 18px; /* Description font size */
    color: #6C6948; /* Dynamic color */
    margin-top: 2px; /* Space above the description */
    text-align: left; /* Align text to the left */
}

.frame5-product-name {
    font-size: 28px; /* Product name font size */
    font-weight: bold; /* Bold text for product name */
    color: #6C6948; /* Dynamic color */
    text-align: left; /* Align text to the left */
  padding-top: 15px;
}

.frame5-product-price {
padding-top:10px;
    font-size: 24px; /* Font size */
   
    margin-top: 5px; /* Space above the price */
    text-align: left; /* Align text */
    display: flex; /* Use flex for horizontal alignment */
    gap: 10px; /* Space between sale and original price */
}

#frame5-sale-price {
    color: #6C6948; /* Dynamic color */
}

#frame5-original-price {
    text-decoration: line-through; /* Strike-through for original price */
    color: gray; /* Gray color for original price */
    font-weight: normal; /* Regular weight for original price */
  color: #6C6948;
}

/* Frame 5 Buy Now Button */
#frame5-buy-now {
  border: 1px solid #6C6948; /* Border around the button */
    display: inline-block; /* Center the button */
    padding: 10px 20px; /* Button padding */
    color: #fff; /* Button text color */
    background-color: #6C6948;
     border-radius: 0px !important;/* Rounded corners */
    font-size: 16px; /* Button font size */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s, transform 0.3s; /* Smooth hover effect */
    margin-top: 20px; /* Space above the button */
}

#frame5-buy-now:hover {
    background-color: #393631; /* Darken background on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.frame5-quiz-reset {
   margin-top: 20px; /* Space above the button */
    background-color: transparent; /* Transparent background */
    border: 1px solid #6C6948; /* Border around the button */
    display: inline-block; /* Allow the button to take width based on content */
    padding: 10px 20px; /* Add padding for better spacing */
    text-decoration: none; /* Remove underline */
    color: #6C6948; /* Button text color */
    
    font-size: 16px; /* Font size */
    text-align: center; /* Center text inside the button */
    white-space: nowrap; /* Prevent text from wrapping */
    transition: background-color 0.3s, transform 0.3s; /* Smooth hover effects */
    
}

.frame5-quiz-reset:hover {
    background-color: #6C6948; /* Add a subtle hover effect */
    color: #fff; /* Change text color on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}

/* Mobile Styles **********************************************************************************************************************/
/* Mobile Styles **********************************************************************************************************************/
/* Mobile Styles **********************************************************************************************************************/
/* Mobile Styles **********************************************************************************************************************/
/* Mobile Styles **********************************************************************************************************************/


@media (max-width: 767px) {

   #custom-quiz .row.row-mtm.align-items-lg-center {
        width: 100%;  /* Allow full width */
        height: auto; /* Allow height to adjust based on content */
    }
 
  .container .quiz-container .col-12.col-sm-1 {
    display: none;
  }


.quiz-header-container {
    position: sticky; /* Makes the header sticky within the quiz-container */
    top: 0;}

.quiz-header {
    text-align: center; /* Center align the header */
    padding: 0px !important; /* Space below the header */

   
}

    /* General Quiz Container */
    .quiz-container {
        padding: 10px; /* Reduced padding on mobile */
        height: auto; /* Ensure the container takes full screen height */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Vertically center content */
        overflow: hidden; /* Prevent scrolling */
    }

    /* General Quiz Frame */
    .quiz-frame {
    display: flex; /* Stack frames vertically */
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    align-items: flex-start; /* Make sure items start at the top */
    height: auto; /* Allows frame to adjust height dynamically */
     /* Ensures the frame covers the viewport height if needed */
    box-sizing: border-box;;
        
    
    }

    /* Quiz Title */
    .quiz-title {
        font-size: 19px; /* Smaller title font size on mobile */
        text-align: center; /* Center align the title on mobile */
        padding-top: 20px;
    
    }

    /* Quiz Description */
    .quiz-description {
        font-size: 14px; /* Smaller description font size on mobile */
        text-align: center; /* Center align the description on mobile */
        padding-bottom: 5px;
        padding-top: 5px;
      
    }


.frame1{
height: auto !important;
  display: flex !important;
}

    /* Frame 1 Adjustments for Mobile */
   .frame1-section-heading {
    font-size: 20px; /* Smaller font size for mobile */
    text-align: center; /* Center align the frame title */
    margin: 0 auto; /* Center heading by setting margins */
}

.frame1-options {
    display: grid; /* Use grid layout for two columns */
    grid-template-columns: 1fr 1fr; /* Set two equal columns */
    gap: 20px; /* Space between options */
    justify-content: center; /* Center options horizontally */
    padding-top: 20px;
  padding-left: 10px;
    margin: 0 auto; /* Center options container */
}

.frame1-quiz-button {
    width: 190%; /* Make button full width within its grid cell */
    max-width: none; /* Remove any max-width restrictions */
    margin: 0 auto; /* Center button within each grid column */
    padding: 10px; /* Uniform padding */
    font-size: 15px; /* Reduce font size to keep text on one line */
    text-align: center;
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    overflow: hidden; /* Hide any text overflow */
    text-overflow: ellipsis; /* Add ellipsis if text is too long */
}

  .frame1-custom-img img {
        width: 90%; /* Ensures image fits within container */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Prevents image from exceeding container width */
        align-content: center;
    }


    /* Frame 2 Adjustments for Mobile */
    .frame2-custom-img img {
        width: 90%; /* Ensures image fits within container */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Prevents image from exceeding container width */
        align-content: center;
    }



.frame2-section-heading {
    font-size: 12px; /* Smaller font size for mobile */
    text-align: center; /* Center align the frame title */
     padding-left: 10px;
}

.frame2-options {
    display: flex;
    flex-direction: column; /* Stack options vertically on mobile */
    align-items: center; /* Center options horizontally */
    padding: 0; /* Remove padding for better alignment */
    justify-content: center; /* Vertically center options */
    gap: 5px; /* Adjust this value to control the vertical space between options */
}

.frame2-options .option {
    margin: 0; /* Remove default margin from options */
padding-left: 10px;
}

    /* Frame 3 Adjustments for Mobile */
    .frame3-section-heading {
        font-size: 20px; /* Smaller font size for mobile */
        text-align: center; /* Center align the frame title */
    }

    .frame3-options {
        display: flex;
        flex-direction: column; /* Stack options vertically on mobile */
        align-items: center; /* Center options horizontally */
        padding: 0; /* Remove padding for better alignment */
        justify-content: center; /* Vertically center options */
        gap: 5px;
    }

    /* Frame 4 Adjustments for Mobile */
    .frame4-section-heading {
        font-size: 20px; /* Smaller font size for mobile */
        text-align: center; /* Center align the frame title */
    }

    .frame4-options {
        display: flex;
        flex-direction: column; /* Stack options vertically on mobile */
        align-items: center; /* Center options horizontally */
        padding: 0; /* Remove padding for better alignment */
        justify-content: center; /* Vertically center options */
        gap: 5px;
    }

    /* Frame 5 Adjustments for Mobile */
    .frame5-section-heading {
        font-size: 20px; /* Smaller font size for mobile */
        text-align: center; /* Center align the frame title */
    }

    

    .frame5-product-header,
.frame5-product-description,
.frame5-product-name,
.frame5-product-extra-description, /* New class for extra description */
.frame5-product-price {
    text-align: center; /* Center align text for product info */
    font-size: 16px; /* Adjust font size for mobile */
}

.frame5-product-name
 {
    text-align: center; /* Center align text for product info */
    font-size: 29px; /* Adjust font size for mobile */
}
p.frame5-product-price {
font-size: 24px;
padding-top:20px;
    display: flex;
    gap: 5px;
    justify-content: center; /* Center-aligns the content */
    align-items: center;
    flex-wrap: wrap; /* Allows text to wrap on smaller screens */
    text-align: center;
    margin: 0 auto; /* Centers the element horizontally */
}

    #frame5-buy-now {
        width: 80%; /* Make the button take up most of the screen width */
        margin: 5px auto !important; /* Center the button */
        text-align: center; /* Center align button text */
    }

/* Default styling for the button container */
div.button-container {
    padding-top:10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* Allows buttons to stack vertically on smaller screens */
    width: 100%; /* Ensures the container spans full width */
    text-align: center; /* Aligns content in case flex fails */
}

/* Ensures consistent spacing for buttons */
div.button-container a,
div.button-container button {
    margin: 5px 0;
}

/* Media query for mobile view */

    div.button-container {
        justify-content: center;
        text-align: center;
    }



.quiz-reset-container {
    position: relative;
    padding-top: 0px;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%;
}

/* Reset Quiz Link */
.quiz-reset-container .quiz-reset {
    font-size: 16px; /* Smaller reset link font size */
    text-align: center; /* Center align reset link */
    display: block; /* Make it a block element for easier clicking */
    margin-top: 25px; /* Add space above the reset link */
    background-color: transparent; /* Transparent background */
    border: 2px solid #6C6948; /* Solid border */
    color: #6C6948; /* Default text color */
    padding: 10px 20px; /* Add some padding for better clickability */
    font-size: 16px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; /* Smooth hover effect */
}

.quiz-reset-container .quiz-reset:hover {
    background-color: #6C6948; /* Solid color on hover */
    color: #fff; /* Text changes to white on hover */
    transform: scale(1.05); /* Slight hover zoom effect */
}


  
}