body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding-top: 43px;

    /* Height of the navbar */
}

a {
    color: hsla(51, 70%, 39%, 0.932);
    /* Change link color */
}

a:hover {
    color: hsla(146, 90%, 27%, 0.911);
    /* Optional: Change color when hovering */
}

@media screen {}

/* #region header styles----------------------------------------------------------------------------------------------------------------------------*/

.navbar {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-logo {
    height: 75px;
    width: auto;
}

.navbar-nav .nav-link {
    color: #333;
    font-size: 1.15rem;
    /* padding: 10px 15px; */
}

.navbar-nav .nav-link:hover {
    color: #1E6B47;
}

/* #endregion */
/* #region hero section styles----------------------------------------------------------------------------------------------------------------------*/
.hero-section {
    background-size: cover;
    background-position: center;
    color: rgb(51, 51, 51);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 30vh;
    /* Adjust this value to make the hero image shorter */
    -webkit-text-stroke: 0.1px rgb(0, 0, 0);
}

.hero-content {
    background: hsla(51, 50%, 54%, 0.664);
    padding: 20px;
    border-radius: 50px;
    width: 50%;
    position: absolute;
    top: 22%;
    left: -20%;
    right: 0;
    margin: 0 auto;

}

.hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0;
}

.hero-button {
    position: absolute;
    bottom: 30%;
    right: 20%;
}

.hero-button2 {
    position: absolute;
    bottom: 20%;
    right: 20%;
}

.btn-primary {
    background-color: hsla(51, 50%, 54%, 0.925);
    border-color: #ffd900a8;
    color: rgb(51, 51, 51);
    font-size: 1.5rem;
    padding: 10px 20px;
    border-radius: 50px;
    -webkit-text-stroke: 0.1px rgb(0, 0, 0);
}

.btn-primary:hover {
    background-color: #FFC700;
    border-color: #FFC700;
}

.hero-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #333;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Parallax effect styles */
.parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/img/header_image.webp');
    /* Your hero image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
    /* Ensure it is behind other elements */
}

/* #endregion */
/* #region gallery styles---------------------------------------------------------------------------------------------------------------------------*/

.gallery .gallery-title {
    font-size: 3rem;
    font-weight: bold;
    /* text-align: center; */
    margin-bottom: 1.5rem;
    /* Space below the title */
    margin-left: 15%;
}

.gallery .gallery-description {
    width: 60%;
    /* Reduce the width of the text for better readability */
    margin: 0 auto 2rem auto;
    /* Center the text and add space below */
    text-align: left;
    /* Align text to the left for a professional look */
}

.gallery .carousel-item {
    display: flex;
    justify-content: center;
    /* Center image horizontally */
    align-items: center;
    /* Center image vertically */
    height: auto;
    /* Ensure the item scales appropriately */
    text-align: center;
    /* Center the image in the carousel */
}

.gallery .carousel-item img {
    max-width: 50%;
    /* Scale the image to 50% of its original size */
    max-height: 80%;
    /* Maintain the aspect ratio */
    margin: 0 auto;
    /* Center the image horizontally */
    object-fit: contain;
    /* Ensure the entire image fits within its container */
}

.gallery .carousel-inner {
    display: flex;
    /* justify-content: center; Center the content horizontally */
    /* align-items: center; Center the content vertically */
    width: 100%;
    /* Ensure the inner container takes full width */
    height: 100%;
    /* Ensure the inner container takes full height */
}

.gallery .carousel-control-prev,
.gallery .carousel-control-next {
    filter: invert(100%);
    /* Make carousel controls visible on dark or complex images */
}

.gallery .carousel-control-prev-icon,
.gallery .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .gallery .gallery-description {
        width: 80%;
        /* Increase width of text on smaller screens for better readability */
    }

    .gallery .carousel-item img {
        max-width: 100%;
        /* Ensure image is full width on smaller screens */
        height: auto;
        /* Maintain the aspect ratio */
        max-height: 300px;
        /* Adjust max height for smaller screens */
    }
}

/* #endregion */
/* #region why choose us styles---------------------------------------------------------------------------------------------------------------------*/

.why-choose-us {
    background-color: #fff;
    padding: 3rem 0;
}

.why-choose-title {
    font-size: 3rem;
    font-weight: bold;
    /* text-align: center; */
    margin-bottom: 3.5rem;
    margin-left: 15%;
}

.why-choose-content {
    margin-left: 20%;
    text-align: left;
}

.why-choose-content p {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: #333;
}

/* #endregion */
/* #region footer styles----------------------------------------------------------------------------------------------------------------------------*/

footer {
    background-color: #333;
    color: #fff;
}

footer .social-links a {
    color: #fff;
    margin: 0 10px;
    transition: color 0.3s;
}

footer .social-links a:hover {
    color: #1E6B47;
}


/* #endregion */
/* #region about us styles--------------------------------------------------------------------------------------------------------------------------*/
.about-us-section {
    background-color: #fff;
    padding: 3rem 0;
}

.about-us-title {
    font-size: 4rem;
    /* font-weight: bold; */
    text-transform: uppercase;
    margin-bottom: 0;
    color: #000;
    /* margin-left: 15%; */
}

.about-us-content {
    display: flex;
    flex-direction: column;
    justify-content: justify;
}

.about-us-content h2 {
    font-size: 2rem;
    /* font-weight: bold; */
    margin-bottom: 1rem;
}

.about-us-content p {
    font-size: 1.25rem;
    color: #000000;
    margin-bottom: 1.5rem;
}

.about-us-content a {
    font-size: 1.25rem;
    color: #ad1010;
    margin-bottom: 1.5rem;
}

.about-us-section .btn-about-us {
    background-color: hsla(51, 100%, 50%, 0.294);
    border-color: #FFD700;
    color: #333;
    font-size: 1.25rem;
    padding: 1em 1em;
    border-radius: 50px;
    display: inline-block;
    /* Use inline-block to make the button's width fit the content */
    margin-top: 1.5rem;
    /* Add space above the button */
    text-align: center;
}

.about-us-section .btn-about-us:hover {
    background-color: #FFC700;
    border-color: #FFC700;
}

@media (max-width: 768px) {
    .about-us-content a {
        font-size: 1rem;
        /* color: #ad1010; */
        margin-bottom: 1.5rem;
    }

    .about-us-content p {
        font-size: 1rem;
        color: #000000;
        margin-bottom: 1.5rem;
    }

    .about-us-title {
        font-size: 2rem;
        /* font-weight: bold; */
        text-transform: uppercase;
        margin-bottom: 0;
        color: #000;
        /* margin-left: 15%; */
    }
}

/* #endregion */
/* #region core values styles-----------------------------------------------------------------------------------------------------------------------*/

.core-values-section {
    /* Your background image */
    background-size: cover;
    background-position: center;
    color: #333;
    /* Use a contrasting color */
    padding: 5rem 0;
    background-color: hsla(146, 50%, 36%, 0.184);

}

.core-values-tabs {
    flex-wrap: wrap;

}

.core-value-tab {
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    margin: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.core-value-tab:hover,
.core-value-tab.active {
    background: #fff;
}

.core-value-content {
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    padding: 20px;
    margin-top: 5rem;
    margin-bottom: 3rem;
}

.core-value-text {
    display: none;
    font-size: 1.1rem;
}

.core-value-text.active {
    display: block;
}


/* #endregion */
/* #region trustpilot widget styles-----------------------------------------------------------------------------------------------------------------*/

.trustpilot-section {
    background-color: #fff;
    padding: 10% 0;
    /* Adjust padding to ensure the section is 20% taller than the widget */
    display: flex;
    align-items: center;
    justify-content: center;
}

.trustpilot-widget {
    width: 100%;
    max-width: 600px;
    /* Adjust max width if needed */
}

/* #endregion */
/* #region page animations--------------------------------------------------------------------------------------------------------------------------*/

.fade-in {
    opacity: 0;
    animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

.slide-in-left {
    opacity: 0;
    animation: slideInLeft 1s forwards;
}

.slide-in-right {
    opacity: 0;
    animation: slideInRight 1s forwards;
}

/* #endregion */
/* #region media querry styles for smaller screens--------------------------------------------------------------------------------------------------*/

@media (max-width: 768px) {
    .hero-content {
        width: 90%;
        left: 5%;
        top: 15%;
        padding: 15px;
        text-align: center;
        /* Center text on smaller screens */
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-button {
        position: relative;
        margin-top: 20px;
        bottom: auto;
        right: auto;
        text-align: center;
    }

    .btn-primary {
        width: 100%;
        font-size: 1rem;
    }
}

/* #endregion */
/* #region Buying Steps Page Styles ----------------------------------------------------------------------------------------------------------------*/
.buying-steps-section {
    padding: 3rem 0;
}

.buying-steps-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 0;
    color: #000;
}

.buyingGuideSteps {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.buyingGuideSteps:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.buyingGuideSteps h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-top: 1rem;
}

.buyingGuideSteps p {
    font-size: 1.1rem;
    color: #666;
    margin-top: 0.5rem;
}

.buyingGuideSteps i {
    color: #75a81794;
    margin-bottom: 1rem;
}

/* Custom colors */
.buyingGuideSteps .text-earthy-brown {
    color: #1c5c138f;
}

.buyingGuideSteps.text-primary {
    color: #4e5257;
}

.buyingGuideSteps.text-primary a {
    color: #000000;
}

.buyingGuideSteps.text-primary a:hover {
    color: #010e1d;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .buyingGuideSteps {
        margin-bottom: 2rem;
    }

    .buying-steps-title {
        margin-left: 0%;
    }

}

/* #endregion */
/* #region FAQ Page Styles -------------------------------------------------------------------------------------------------------------------------*/
.faq-section {
    padding: 3rem 0;
}

.faq-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
}

#faqSearch {
    max-width: 600px;
    margin: 0 auto 2rem auto;
    padding: 10px;
    font-size: 1.2rem;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.faq-section .accordion-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faq-section .accordion-button {
    font-size: 1.2rem;
    color: #333;
    background-color: #fff;
    border: none;
    outline: none;
    border-radius: 10px;
}

.faq-section .accordion-button:focus {
    box-shadow: none;
}

.faq-section .accordion-body {
    font-size: 1rem;
    color: #666;
    padding: 1rem 2rem;
}

.faq-section .accordion-button::after {
    font-size: 1rem;
}

.faq-section .accordion-button:not(.collapsed) {
    color: #007bff;
    background-color: #e9ecef;
}

.faq-section .accordion-button:not(.collapsed)::after {
    color: #007bff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .faq-section h2 {
        font-size: 2rem;
    }

    #faqSearch {
        font-size: 1rem;
    }

    .faq-section .accordion-button {
        font-size: 1rem;
    }

    .faq-section .accordion-body {
        font-size: 0.9rem;
    }
}

/* #endregion */
/* #region Customization Page Styles ---------------------------------------------------------------------------------------------------------------*/

.customization-page {}

/* Styles for the new full-width background banner on the customization page */
.customization-page .customization-intro-banner {
    width: 130vw;
    /* Extends beyond the viewport edges */
    margin-left: calc(-65vw + 50%);
    /* Centers the wider-than-viewport element */
    background: linear-gradient(rgba(0, 0, 0, 0.486), rgba(0, 0, 0, 0.692)),
        url('/img/background_wood.webp');
    /* Your wood background image with overlay */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 0;
    /* Vertical padding inside the banner */
    color: #fff;
    /* Default text color for this entire section */
    box-sizing: border-box;
    /* Ensures padding is included in the 130vw width */
    margin-bottom: 2rem;
    /* Add some space below the banner if desired */
    margin-top: 0px;
}

/* NEW RULE: Styles for the content wrapper *inside* the banner */
.customization-page .customization-intro-banner .customization-intro-content-wrapper {
    width: 80%;
    /* Or 60% like your product page content-wrapper, adjust as needed */
    max-width: 1200px;
    /* Optional: A fixed max-width for very large screens (e.g., on ultra-wide monitors) */
    margin: 0 auto;
    /* Centers this content wrapper within the 130vw parent */
    padding: 0 0px;
    /* Add some horizontal padding inside, to prevent text hugging edges */
    box-sizing: border-box;
    text-align: justify;
    /* Re-apply if you want justified text as in your original intro-text */
    text-indent: 5%;
    font-size: 1.15rem;
}

/* Ensure text elements (paragraphs, headings) inside the new content wrapper are white */
.customization-page .customization-intro-banner .customization-intro-content-wrapper p,
.customization-page .customization-intro-banner .customization-intro-content-wrapper h1,
.customization-page .customization-intro-banner .customization-intro-content-wrapper h2 {
    color: #fff;
    /* Set text color to white */
}

/* IMPORTANT: If you moved the content out of your original .intro-text, */
/* you might want to remove or comment out its original styles if it's no longer used. */
/* .customization-page .intro-text { */
/* width: 80%; */
/* margin: 0 auto 2rem auto; */
/* text-align: justify; */
/* text-indent: 5%; */
/* } */

.customization-page h2 {
    font-size: 2rem;
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 2px;
    /* margin: 0 auto 2rem auto;   */
    /* the above margin bootom property adds white space in collapsed accordion button */
}

.customization-page .special-font {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 1rem;
}

.customization-page .total-price-container {
    position: sticky;
    top: 103px;
    /* Adjust as needed */
    z-index: 1000;
    background-color: white;
    padding: 0em;
    /* Reduce padding */
    border-radius: 50px;
    border: 1px solid #56a76c;
    text-align: center;
    margin: 0 auto;
    /* Center the total price container */
    max-width: 300px;
    /* Set a max-width for the container */
}

.customization-page .total-price-container p {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
    /* Change text color to a standout color */
    background-color: hsla(139, 32%, 50%, 0.208);
    /* Add a contrasting background color */
    padding: 5px;
    /* Reduce padding */
    border-radius: 50px;
    /* Add rounded corners */
    border: none;
    /* Remove the border from the paragraph */
    margin: 0;
    /* Remove the margin */
    text-align: center;
    /* Center text alignment */
}

.customization-page .form-control {
    margin-bottom: 1rem;
    padding: 0.75rem;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 50px;
}

.customization-page .button-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.customization-page .selection-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.customization-page .selection-table th,
.customization-page .selection-table td {
    border: 1px solid #ddd;
    padding: 0.75rem;
    text-align: left;
}

.customization-page .selection-table th {
    background-color: #f8f9fa;
    font-weight: bold;
}

.customization-page .selection-table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.customization-page .selection-table tr:hover {
    background-color: #ddd;
}

.customization-page .accordion-item {
    max-width: 60%;
    /* Adjust this value as needed */
    margin: 0 auto 1.25rem;
    /* Center the accordion and add spacing between tabs */
    border: 2px solid #ddd;
    /* Increase border width */
    border-radius: 10px;
    /* Add rounded corners to the border */
}

.customization-page .accordion-header {
    color: #150303;
    /* Set accordion titles to black */
}

.customization-page .accordion-button {
    font-size: 1.2rem;
    color: #333;
    /* Overrides previous #000 */
    background-color: #ffffff;
    /* Overrides previous #fff */
    border: none;
    outline: none;
    border-radius: 10px;
    /* Consider adding padding here if the button still has unwanted internal space */
    padding: 10px 15px;
    box-shadow: none !important;
}

.customization-page .accordion-body .btn:hover {
    background-color: hsla(75, 2%, 51%, 0.4);
    /* A slightly darker, more opaque green on hover */
    color: #000000;
    /* Keep text color black for good contrast on hover */
    border-color: #000000;
    /* Keep border color black on hover */
}

.customization-page .accordion-button:not(.collapsed) {
    color: #000;
    /* Keep the color black when expanded */
    background-color: #fff;
    padding: 10px 15px;
}

.customization-page .accordion-body img {
    max-width: 100%;
    /* Ensure the image does not overflow its container */
    height: auto;
    /* Maintain aspect ratio */
    border: 2px solid transparent;

    transition: border-color 0.3s;

}

.customization-page .accordion-body .btn {
    border-radius: 50px;
    color: #000000;
    border-color: #000000;
}

.customization-page .accordion-body .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    /* Dynamic columns with a minimum width */
    gap: 10px;
    /* Add some spacing between the items */
}

.customization-page .accordion-body .option-container {
    text-align: center;
}

.customization-page .accordion-body .option-container img {
    width: 100%;
    /* Ensure images take full width of their container */
    height: auto;
    /* Maintain aspect ratio */
}

.customization-page .accordion-body .option-container button {
    margin-top: 5px;
    /* Add some spacing between the image and the button */
    /* The specific padding-left:0.75vw was in a media query, so it stays there. */
}

.customization-page .accordion-body .option-container.selected {
    border: 2px solid #081e05;
    /* Highlight the selected option */
    border-radius: 5px;
    background-color: #564409;
}

/* Apply to all selected buttons within the accordion body */
.customization-page .accordion-body .selected-button {
    background-color: hsla(139, 32%, 50%, 0.208);
    /* Filled background for selected button */
    color: rgb(0, 0, 0);
    border-color: #140f0e;
}

.selection-display {
    font-size: 0.875rem;
    /* Adjust the font size as needed */
    color: #000000;
    /* Set the color to a muted tone */
}

.selection-display.selected-item {
    background-color: hsla(139, 32%, 50%, 0.208);
    /* Background color for the selected item */
    color: white;
    /* Text color for the selected item */
    padding: 2px 5px;
    /* Add some padding */
    border-radius: 50px;
    /* Add rounded corners */
}

.customization-page .accordion-body .gallery .selected img {
    border-color: #000000;
    /* Highlight the selected option */
}

/* Enquiry Form Styles --------------------------------------------------------------------------------*/

.enquiry-form-container #enquiryForm {
    max-width: 40rem;
    margin: 5rem auto;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(10, 100, 1, 0.322);
}

.enquiry-form-container #enquiryForm h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #278e10;
    text-align: center;
}

.enquiry-form-container #enquiryForm p {
    font-size: 1rem;
    margin-bottom: 1rem;
    color: #666;
}

.enquiry-form-container #enquiryForm .form-group label {
    display: block;
    font-size: 1.1rem;
    color: #333;
    text-align: left;
    margin-left: 1em;
    margin-bottom: 0.25em;
}

/* Override the global label rule for the business toggle label */
.enquiry-form-container #enquiryForm .form-group #business-toggle-label {
    display: inline-block !important;
    margin-right: 1em;
    vertical-align: middle;
}

/* Also ensure the button is inline */
.enquiry-form-container #enquiryForm .form-group #businessToggleButton {
    display: inline-block;
    vertical-align: middle;
}

.enquiry-form-container #enquiryForm .form-group input,
.enquiry-form-container #enquiryForm .form-group textarea {
    font-size: 1rem;
    color: #000000;
    padding: 0.75rem;
    border: 1px solid #0f6f0498;
    border-radius: 5px;
}

.enquiry-form-container #enquiryForm .btn {
    font-size: 1rem;
    color: #fff;
    background-color: #28a745;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
}

.enquiry-form-container #enquiryForm .btn:hover {
    background-color: #218838;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    #enquiryForm {
        padding: 1rem;
        max-width: 90%;
    }

    .customization-page .customization-intro-banner .customization-intro-content-wrapper {
        width: 60%;
        /* Reduce the width of the text for better readability */
    }

    .customization-page h2 {
        font-size: 1.75rem;
    }

    .customization-page .special-font {
        font-size: 1.25rem;
    }

    .customization-page .total-price-container p {
        font-size: 1.1rem;
    }

    .customization-page .accordion-item {
        max-width: 90%;
        /* Adjust this value as needed */
    }

    .customization-page .accordion-body .gallery {
        grid-template-columns: repeat(auto-fill, minmax(47%, 1fr));
        /* Dynamic columns with a minimum width */
    }

    .customization-page .accordion-body .option-container button {
        padding-left: 0.75vw;
    }
}

/* #endregion */
/* #region product page styles----------------------------------------------------------------------------------------------------------------------*/


/*Product page with simple customisation styles-------------------------------------------------------------------*/

.product-page {
    width: 60%;
    /* Reduce the width of the text for better readability */
    margin: 3rem auto 4rem auto;
    /* Center the text and add space below */
    text-align: left;
    /* Align text to the left for a professional look */
}

/* Section for the product description */
.product-page .description-section {
    width: 130vw;
    margin-left: calc(-65vw + 50%);
    background: linear-gradient(rgba(0, 0, 0, 0.486), rgba(0, 0, 0, 0.692)),
        url('/img/background_wood.webp');
    /* Image with transparency overlay */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px 0;
    color: #fff;
}

.product-page .description-section .content-wrapper {
    width: 60%;
    /* Limits content width */
    margin: 0 auto;
    /* Centers the content */
    padding: 0 20px;
    /* Add some padding inside the content wrapper */
}

.product-page .description-section h1 {
    font-size: 5vh;
    margin-bottom: 4vh;
    text-align: center;
}

.product-page .description-section p {
    font-size: 2.15vh;
    line-height: 1.5;
    text-align: justify;
}

/* Container holding both the image and customization sections */
.product-page .container {
    display: flex;
    justify-content: space-between;
    padding-top: 0;
}

/* Image section styling */
.product-page .image-section {
    width: 49%;
}

.product-page .image-section img {
    width: 98%;
}

/* Customization section styling */
.product-page .customization-section {
    width: 45%;
}

/* Styling for each customization option */
.product-page .option {
    margin-bottom: 1vh;
    border: 2px solid #cfc0c0;
    /* Light grey border around each option set */
    border-radius: 5px;
    /* Optional: round the corners */
    padding: 10px;
    /* Add some padding inside the option set */
    background-color: #ffffff;
    /* Light background color for separation */
}

/* Styling for option labels */
.product-page .option label {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    /* Add space below label */
    background-color: #6a8b0e4b;
    border-radius: 5px;
}

/* Styling for image options */
.product-page .option img {
    width: auto;
    height: 12vh;
    object-fit: cover;
    margin-right: 0px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: border-color 0.3s ease;
    /* Smooth transition for selection */
}

/* Highlight selected option */
.product-page .option img.selected {
    border-color: hsla(139, 32%, 50%, 0.99);
}

/* Total price styling */
.product-page #total-price {
    font-size: 24px;
    margin-bottom: 20px;
}

/* Custom styling for the price */
#price {
    color: hsl(139, 48%, 24%);
    /* Change the total price color to your desired color */
    font-size: 24px;
    /* Adjust font size */
    font-weight: bold;
    /* Make it bold for emphasis */
    margin-top: 20px;
    /* Add some space above the price */
}

.product-page .img-container {
    text-align: center;
    /* Center the content (image and text) */
    margin: 0;
    /* Space around the container */
    display: inline-block;
    /* Ensure they are displayed inline within the grid */

}

.product-page .choice-name {
    font-size: 2vh;
    color: #333;
    /* Color for the text under the image */
    text-align: center;
    /* Ensure the name is centered under the image */
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .product-page {
        padding: 0 0.25rem 0.25rem 0.25rem;
        width: 98%;
        /* Reduce the width of the text for better readability */
        margin: 0 auto;
        /* Center the product page */
        text-align: center;
        /* Center text and inline elements */
    }

    .product-page .image-section img {
        max-width: 80%;
    }

    /* Customization section styling */
    .product-page .customization-section {
        width: 90%;
        margin: 5% auto;
    }

    .product-page .option img {

        height: 8vh;
        object-fit: contain;
        margin-right: 3px;
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 3px;
        transition: border-color 0.3s ease;
        /* Smooth transition for selection */
    }

    .product-page .container {
        display: inline-block;

    }

    .product-page .image-section {
        width: 90%;
    }
}

/* #endregion */
/* #region cookie banner----------------------------------------------------------------------------------------------------------------------------*/
#cookieConsent {
    position: fixed;
    bottom: 10px;
    width: 60%;
    background-color: #c1e0b7;
    padding: 15px;
    text-align: center;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    max-width: 50%;
}

.cookie-container p {
    margin: 0;
    padding: 0 10px;
}

.cookie-buttons {
    margin-top: 10px;

}

#acceptCookies,
#rejectCookies {
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
}

/* #endregion */
/* #region business toggle -------------------------------------------------------------------------------------------------------------------------*/
/* Round toggle switch style for business-switch */
/* Toggle with "Yes" and "No" labels */
/* Toggle button style */
.business-toggle-btn {
    padding: 1em 1.5em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 2em;
    background-color: #ccc;
    color: #333;
    cursor: pointer;
    transition: 0.3s;
}

.business-toggle-btn[aria-pressed="true"] {
    background-color: #4CAF50;
    color: white;
}

/* #endregion */
/* #region Indentation classes ---------------------------------------------------------------------------------------------------------------------*/

.indent-1 {
    padding-left: 1em;
}

.indent-2 {
    padding-left: 2em;
}

.indent-3 {
    padding-left: 3em;
}

/* For small screens, reduce indentation */
@media (max-width: 768px) {
    .indent-1 {
        padding-left: 0.5em;
    }

    .indent-2 {
        padding-left: 1em;
    }

    .indent-3 {
        padding-left: 1.5em;
    }
}

/* #endregion */
/* #region delivery info button and text block styles ----------------------------------------------------------------------------------------------*/

.dark-background-section {
    background-color: #343a4000;
    /* Dark background for the first button */
}

/* Base styling for the FIRST button (Important Order Details - white text/border) */
.custom-order-btn {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.514);
    color: white;
    /* White text for this button */
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
    font-size: 1rem;
    display: inline-flex;
    /* To align text and icon nicely */
    align-items: center;
    /* justify-content: center; */
    cursor: pointer;
    /* Indicate it's clickable */
    text-decoration: none;
    /* Remove default underline */
}

/* Hover/Focus states for the custom-order-btn */
.custom-order-btn:hover,
.custom-order-btn:focus {
    background-color: rgba(255, 255, 255, 0.329);
    color: rgba(255, 255, 255, 0.966);
    border-color: rgba(255, 255, 255, 0.514);
    outline: none;
    /* Remove default focus outline if not styled otherwise */
}


/* Styling for the SECOND button (Enquiry Details - dark text/border) */
.dark-delivery-btn {
    background-color: transparent;
    border: 2px solid rgba(15, 15, 15, 0.356);
    /* Darker border */
    color: rgba(0, 0, 0, 0.692);
    /* Dark text for this button */
    padding: 10px 20px;
    /* Consistent padding */
    font-weight: bold;
    border-radius: 50px;
    /* Consistent border-radius */
    transition: all 0.3s ease;
    font-size: 1rem;
    display: inline-flex;
    /* To align text and icon nicely */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

/* Hover/Focus states for the dark-delivery-btn */
.dark-delivery-btn:hover,
.dark-delivery-btn:focus {
    background-color: rgba(0, 0, 0, 0);
    /* Slightly darker overlay on hover */
    color: rgba(0, 0, 0, 0.9);
    /* Make text a bit darker on hover */
    border-color: rgba(15, 15, 15, 0.6);
    outline: none;
}


/* Styling for the chevron arrow icon (applies to both buttons) */
.collapse-arrow {
    transition: transform 0.2s ease-in-out;
    /* Smooth rotation transition */

}

/* Rotate the arrow when the button is expanded (for both button types) */
.custom-order-btn[aria-expanded="true"] .collapse-arrow,
.dark-delivery-btn[aria-expanded="true"] .collapse-arrow {
    transform: rotate(180deg);
}


/* Styling for the content inside the collapsed section */
/* Note: Using .collapse .card-body makes it apply to any card-body inside a Bootstrap collapse */
.collapse .card-body {
    background-color: rgba(250, 246, 246, 0);
    /* Slightly transparent background for better contrast on dark section */
    color: rgb(233, 233, 233);
    /* Ensure text inside is white/light grey, good for dark background */
    border: none;
    padding: 5px;
    font-size: 1.1rem;
    line-height: 1.5;
    /* text-align: justify; */
    border-radius: 20px;
    /* Match Bootstrap card-body default */
    margin-top: 10px;
    /* Space between button and collapsed content */
}

/* Override for the second card-body to have dark text on a light background */
/* You might wrap the second collapse in a container with a class like .light-section-content */
.light-section-content .collapse .card-body {
    background-color: #ffffff;
    /* White background */
    color: #0f0f0f;
    /* Dark text for contrast */
    border: none;
    /* Standard card border */
}

/* #endregion */