@media (max-width: 768px) {
    #colorblindAwarenessAccordion {
      margin-top: 150px; /* Adjust as necessary */
    }
  }

@media (max-width: 768px) {
    .gallery-welcome-container {
      margin-top: 150px; /* Adjust as necessary */
    }
  }

.contact-form .form-group {
    margin-bottom: 15px;
}

.contact-form .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form .form-group input,
.contact-form .form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}


.contact-form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff00;
}

.contact-form-container p {
    text-align: justify;
    text-justify: inter-word;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

header h1 {
    margin-top: 0px;
    text-align: center;
    font-family: 'Dancing Script', cursive;
    font-size: 6rem; /* Adjust size as needed */
    font-weight: 300; /* Adjust this value to your desired weight */
    color: #15475a;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    line-height: 1.2;

}


h2 {
    text-align: center;
    font-family: 'Raleway';

}

p {
    margin-top: 8px;
    text-align: center;
    font-family: 'Raleway';
}

h3 {
    font-family: 'Raleway';
    margin-top: 8px;
}


.gallery-container {
    display: flex;
    flex-wrap: wrap; /* Allows the cards to wrap to the next line */
    justify-content: space-around; /* Centers the cards with even space around */
    padding: 20px; /* Adds padding around the gallery container */
}

.card {
    flex: 0 0 100%; /* Default to one card per row on small screens */
    margin: 20px 0; /* Adjust as needed */
    width: 90%; /* Adjust as needed */
    padding: 15px 5px; /* Horizontal and vertical padding */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    align-items: center;
    box-sizing: border-box;
    border: none; /* Remove the border */
}

@media (min-width: 768px) { /* Adjust for two cards per row on medium screens */
    .card-image-container {
        height: 500px; /* Height for medium screens */
    }
    .card {
        flex: 0 0 calc(50% - 40px);
        width: calc(50% - 30px);
    }
}

@media (min-width: 1200px) { /* Adjust for three cards per row on large screens */
    .card-image-container {
        height: 800px; /* Height for large screens */
    }
    .card {
        flex: 0 0 calc(33% - 40px);
        width: calc(33% - 30px);
    }
}

.card-image-container {
    width: 100%; /* Full width of the card */
    height: 400px; /* Specific height for the images (adjust as needed) */
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    overflow: hidden; /* Hide any overflow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.card:hover .card-image-container {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.card-content h3,
.card-content p {
    transition: all 0.3s ease; /* Smooth transition for the text */
}

.card:hover .card-content h3,
.card:hover .card-content p {
    color: #15475a; /* Change the text color on hover */
    transform: scale(1.05); /* Scale effect to the text */
}

.card img {
    max-width: 100%; /* Full width of the container */
    max-height: 100%; /* Full height of the container */
    object-fit: cover; /* Fit within the container without distortion */
}


.card-content {
    margin-top: 10px;
    text-align: center;
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Vertical layout */
    align-items: center; /* Horizontal centering */
    height: 100px; /* Set a specific height for the text content container */
}


.content {
    padding: 2rem; /* Adjust as needed */
}


header {
    position: fixed; /* Fixes the header at the top of the page */
    width: 100%; /* Full width of the viewport */
    background: linear-gradient(to right, #b1d9e954,  #ebf0f34b);
    /* background-color: rgba(255, 255, 255, 0.2); /* 0.8 is the opacity level */    
    z-index: 1000; /* Ensures the header is above other elements */
    padding: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

header nav a {
    display: inline-block;
    font-family: 'Raleway';
    padding: 5px 20px;
    background-color: #f0f0f0; /* Background color for the buttons */
    margin: 3px;
    text-decoration: none; /* Remove underline */
    color: #333; /* Text color */
    /* ... additional styling ... */
}


/* Existing 'main' properties combined with new ones */
main {
    padding-top: 200px; /* Adjust this based on the height of your header to avoid overlap */
    font-family: 'Roboto';
    min-height: calc(100vh - 100px); /* Adjust based on the combined height of header and footer */
    width: 100%;
    display: block;
    justify-content: center;
}


footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-position: center 0; /* Start position */
    /* ... other styles ... */
}

/* ===========================================================*/

.artwork-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px
}

@media (max-width: 768px) {
    .artwork-details{
        padding-top: 150px
    }
}

.details-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 60%; /* Adjust as needed */
    padding: 20px 0; /* Gap between image and details */
}

.details-section .shopping-section {
    flex: 1 1 35%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns items to the left */
    padding-top: 0px; /* Adjust this value to shift the section downward */
    padding-left: 80px; /* Optional: Adds some space to the left of the buttons and price tags */
    margin-bottom: 200px;
}


@media (max-width: 768px) { /* Adjust for small screens */
    .details-section {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}

/* Modified Description Section */
.description {
    flex: 1 1 60%;
    text-align: left; /* Align left */
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
}

.description h3 {
    font-weight: bold; /* Title in bold */
}

/* Added styles for thumbnail bar */
.thumbnail-bar {
    display: flex;
    overflow-x: scroll; /* Enables horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scroll bar */
    width: 100%;
    white-space: nowrap; /* Prevents wrapping of thumbnails */
    margin-top: 10px;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
    ax-width: 80%; /* Set this to the desired maximum width */
    margin: 0 auto; /* Center the container */
}

.thumbnail-bar::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome and Safari */
}

.thumbnail {
    height: 60px;
    width: auto;
    object-fit: cover;
    margin-right: 10px;
    cursor: pointer;
    flex-shrink: 0; /* Prevents shrinking of thumbnails */
}


/* Styles for Shopping Section and other parts remain unchanged */
.shopping-section {
    flex: 1 1 35%; /* Keep the current flex basis for responsiveness */
    display: flex;
    flex-direction: column; /* Align elements vertically */
    align-items: center; /* Center-align content */
    gap: 10px; /* Add consistent spacing between elements */
    margin-top: 80px; /* Retain your margin to align with other sections */
}


.image-box {
    flex: 1 1 60%;
    max-width: 60%;
    text-align: center; /* Center inline-block or inline elements */
    cursor: pointer;
}

.main-image {
    width: 100%;
    max-width: 500px;
    cursor: pointer;
}

.add-to-cart {
    padding: 10px 20px;
    margin-bottom: 10px;
    cursor: pointer;
}

.add-to-cart:disabled {
    cursor: not-allowed;
}


.inquire-button{
    padding: 15px 30px; /* Make the buttons larger */
    font-size: 1.1em; /* Increase text size for prominence */
    font-weight: bold; /* Make text more prominent */
    margin-bottom: 15px; /* Add consistent spacing */
    cursor: pointer;

    /* Ensure buttons are the same size */
    width: 200px; /* Fixed width for uniformity */
    text-align: center;
}

.no-decoration {
    text-decoration: none;
}


.price {
    font-size: 1em; /* Keep the price font consistent with the rest of the details */
    font-weight: bold; /* Make the pricing stand out */
    white-space: nowrap; /* Prevent text wrapping */
}

.description .artwork-title,
.description .artwork-size,
.description .artwork-medium,
.description .artwork-description p { /* Targeting p inside artwork-description */
    text-align: justify; /* Align left */
    text-justify: inter-word;
    margin: 0; /* Reset margin */
    padding: 0; /* Reset padding */
}

.artwork-year {
    text-align: left;
}

.about-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 6rem; /* Adds space at the bottom */
    max-width: 1200px;
    margin: auto; /* Centers the container */
}

.about-image-container {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 10%;
}

.about-image img {
    padding-top: 100px;
    max-width: 600px;  /* Set the maximum width */
    max-height: 750px;  /* Set the maximum height */
    object-fit: contain;  /* Makes sure the aspect ratio is preserved */
    margin: auto;  /* Centers the image */
}

.thumbnail-bar {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.about-text {
    flex: 1;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 5%;  /* Adjust the right padding to reduce the boundary */
    padding-left: 10%;  /* Adjust the right padding to reduce the boundary */

}

.about-text p {
    text-align: justify;
    text-justify: inter-word;
    width: 100%;
}

@media (max-width: 768px) {
    .about-container {
        flex-direction: column;
        align-items: center;
    }

    .about-image,
    .about-text {
        max-width: 100%;
        flex: 1 1 100%;
    }
}

/*
===========================================================
Accordion section
*/

/* Accordion Styles */
.accordion {
    background-color: rgba(135, 206, 250, 0.7);  /* Semi-transparent blue */
    color: white;
    cursor: pointer;
    padding: 15px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: 0.4s;
}

/* On button click or hover */
.accordion.active,
.accordion:hover {
    background-color: rgba(0, 128, 0, 0.7);  /* Semi-transparent green */
}

/* Panel styles */
/* Existing styles for panel and colorblindness-section-panel */
.panel, .colorblindness-section-panel {
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    padding: 0 15px;
    display: none;
    overflow: hidden;
    text-align: left;
}

.colorblindness-section-panel {
    background-color: rgba(255, 255, 255, 0);
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0px;  /* new */
    font-family: 'Roboto';  /* new */
}

.colorblindness-section-panel p {
    flex: 1 1 60%;
    text-align: left;
    margin: 0;
    padding: 0;
    margin-bottom: 16px; /* Or any other value that suits your layout */
}



.colorblindness-section-panel img {
    
}

.accordion-blue {
    background: linear-gradient(to right, rgba(167, 159, 235, 0.671) 30%, rgba(255,255,255,0) 100%);
}

.accordion-red {
    background: linear-gradient(to right, rgba(223, 59, 59, 0.247) 30%, rgba(255,255,255,0) 100%);
}

.accordion-green {
    background: linear-gradient(to right, rgba(111, 207, 151, 0.6) 30%, rgba(255,255,255,0) 100%);
}

.accordion-yellow {
    background: linear-gradient(to right, rgba(250, 218, 94, 0.6) 30%, rgba(255,255,255,0) 100%);
}

.accordion-purple {
    background: linear-gradient(to right, rgba(156, 39, 176, 0.6) 30%, rgba(255,255,255,0) 100%);
}

.accordion-orange {
    background: linear-gradient(to right, rgba(243, 156, 18, 0.6) 30%, rgba(255,255,255,0) 100%);
}

.accordion-cyan {
    background: linear-gradient(to right, rgba(0, 255, 255, 0.3) 30%, rgba(255,255,255,0) 100%);
}

.accordion-coral {
    background: linear-gradient(to right, rgba(255, 127, 80, 0.3) 30%, rgba(255,255,255,0) 100%);
}

.accordion-gray {
    background: linear-gradient(to right, rgba(128, 128, 128, 0.3) 30%, rgba(255,255,255,0) 100%);
}

/* Add styles for the new wrapper class */
.panel-content {
    max-width: 800px; /* Or whatever maximum width you'd like for the column */
    margin-left: auto;
    margin-right: auto;
}

.panel img {
    max-width: 100%;
    height: auto;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 50%;
}


/* Update text style */
.panel p {
    margin: 0;
    text-align: justify;
    text-justify: inter-word;
}

/*
========================================================
lightbox
*/
  
.lightbox-hidden {
    display: none;
  }
  
  #lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    overflow: hidden;
    display: none;
  }
  
  .close-lightbox {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
  }
  
  .lightbox-image {
    position: absolute;
    max-width: 90%;
    max-height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: zoom-in;
  }
  
  .zoom-area {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    background: rgba(255, 255, 255, 0.2);
    cursor: zoom-in;
    display: none;
  }
  


/* Existing styles */

/* Customizations */


/* To center-align the content and remove any default padding/margin */
/* Replacing the existing .colorblindness-section */
/* To center-align the content and remove any default padding/margin */
.colorblindness-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 100%; /* Full width */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.text-section {
    flex: 1;
    padding-right: 20px;
    text-align: justify;
}

.text-section p {
    text-align: justify;
}


.image-section {
    flex: 1;
    padding-left: 20px;
    padding: 0;
    margin: 0;
}

/* To make images responsive and remove extra space */
.responsive-img {
    max-width: 600px;  /* or any other value that suits your layout */
    height: auto;
    display: block;
    margin: 0 auto;
    padding-left: 20px;
}

@media (min-width: 2560px) {
    .responsive-img {
        max-width: 800px;  /* Set a maximum width at high resolutions */
    }
}


@media (max-width: 768px) {
  .colorblindness-section {
    flex-direction: column;
  }
}





/* New style for image captions */
.image-caption {
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
}

/* To remove the extra whitespace around the image */
.image-section img {
    width: 100%;
    height: auto;
    margin: 0;
}

  
@media (max-width: 768px) {
    .colorblindness-section {
      flex-direction: column;
    }
  }

  
  .center-text {
    text-align: center;
}

.main-content-wrapper {
    display: block;
    width: 100%;
  }
  

  .text-section ul {
    margin-left: 50px;
}

.colorblindness-section h2 {
    text-align: left;
}





.language-selector {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 10px; /* Adjust as needed */
}

.language-selector form {
    display: flex;
}

.language-selector button {
    background: none;
    border: none;
    cursor: pointer;
    margin: 0 5px;
}

.language-selector button img {
    height: 20px; /* Adjust as needed */
}

.language-selector button.active {
    border-bottom: 2px solid #000; /* Highlight for active language */
}



.terms-container {
    max-width: 800px; /* Adjust the width as needed */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Add some padding */
    background-color: #fff; /* Optional: Background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

.terms-text {
    text-align: justify;
}

.terms-title {
    text-align: left;
}

.terms-subtitle {
    text-align: left;
    margin-top: 20px; /* Space above each subtitle */
}