body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    /* background-image: url(../images/Logobkg.png);
    background-position: -290vh 609vh;
    background-size: cover; */
    /* opacity: 01; */
    /* z-index: -2; */
    position: relative
  }

 

@media (min-width: 1024px) {
    body {
        padding: 20px;
    }
}



 /* Base font size for the root element */
:root {
    font-size: 22px; /* Default base size for larger screens (desktops) */
}

/* Font size classes using rem units */
.fontSize1 {
    font-size: 1.8rem; /* 40px if base size is 16px */
  }
  
  .fontSize2 {
    font-size: 1.63rem; /* 36px if base size is 16px */
  }
  
  .fontSize3 {
    font-size: 1.45rem; /* 32px if base size is 16px */
  }
  
  .fontSize4 {
    font-size: 0.9rem; /* 20px if base size is 16px */
  }
  
  .fontSize5 {
    font-size: 0.72rem; /* 16px if base size is 16px */
  }

  .fontSize6 {
    font-size: 0.59rem; /* 16px if base size is 16px */
  }
  
  
.navbar{
    padding:0;
    width: 100vw !important;
    overflow: hidden;
    z-index: 999999 !important;
    white-space: nowrap;
}
.navbar-custom {
    background-color: #0fb1b8;
    transition: background-color 0.3s;
    position: fixed;
    width: 100%;
    /* top: 2vh; */
    z-index: 1000;
    /* font-size: 20px; */
}

.navbar-heading{
    color: #c3ecedbf;
}
.nav-item{
  /* padding-right: 8%; */
  padding-left: 15%;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand img{
  height: 33px;
  padding-top: 0px;
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link,
.navbar-custom .customer-care,
.navbar-custom .navbar-toggler-icon,
.navbar-custom .btn-outline-light {
  color: white;
  /* font-weight: bold; */
}

.navbar-custom .nav-link:hover,
.navbar-custom .customer-care:hover {
/*background-color: #1AA699 */
/* Optional: Slightly lighter shade on hover */
}

.navbar-custom .navbar-toggler {
  /* border-color: #0FB1B8; */
  box-shadow: none;
  border: 0;
  /* border: 1px solid #0FB1B8; */
  /* border-radius: 43%; */
  /* background-color: #0FB1B8; */
}

.navbar-custom .navbar-toggler:hover,
.navbar-custom .navbar-toggler:focus,
.navbar-custom .customer-care-btn:hover {
    /* border-color: #0FB1B8; */
    box-shadow: none;
    /* border: 1px solid #0FB1B8; */
    /* border-radius: 43%; */
    /* background-color: #0FB1B8; */
}



/* *******************Collapse open************************* */

.navbar-collapse{
    padding-top:1%;
    transition: visibility 0s, opacity 0.1s linear;
}
.navbar-toggler-icon {
    height: 1.2em;
}
.navbar-custom .navbar-collapse.show {
  /* background-image:linear-gradient(to right, rgb(0, 31, 82) , rgb(0, 69, 126)); */
  background-color: transparent;
  /* background-color: #016067; */
  margin-right: 3%;
  text-align: right;
  opacity: 1;
}

.navbar-custom .navbar-collapse.show .nav-link {
  color: white; /* Ensure the links are visible against the new background color */
  padding-bottom: 0%;
}

.navbar-custom .navbar-collapse.show .nav-link:hover {
  /* color: white; Optional: slightly lighter shade on hover */
 /* background-color: white; */
 /*background: rgba(0, 0, 0, 0.1);*/
 /* background-image:linear-gradient(to right, rgb(0, 31, 82) , rgb(0, 69, 126)); */
 /*background-color: #0fb1b8;*/
 color:#0fb1b8;
} 

/* *******************Collapse end************************* */

.container {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    padding: 0 5px 0;
    align-items: baseline;
}



.imageContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* height: 95vmin; */
    overflow: hidden;
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    transform: translate3d(0px, 0px, 0px);
}

/* Rectangle 46 */
.mainbkg{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    /* top: -6%; */
    background-image: url(../images/bkg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    display: flex;
    justify-content: center;
}

/* maple Ink logo 1 */
.logo img {
    position: absolute;
    width: 429px;
    height: 429px;
    left: 35%;
    top: -11%;
    transform: scale(1); /* Default scale for larger screens */
}

.pageheader{
    position: absolute;
    width: 100%;
    height: auto;
    top: 38%;
    text-align: center;
    text-transform: uppercase;
    color: #000000;
}

.pageheader h1, .box1 h1{
    font-weight: bold;
  }



.box1 {
    position: absolute;
    width: 87%;
    /*top: 77%;*/
    background-color: #ffffff85;
    box-shadow: 0px 14px 60px rgba(0, 0, 0, 0.1);
    text-align: left;
    padding: 2%;
    bottom: 2%;
}

/* Hover effect */
.box1:hover {
    border: 1px solid; /* Add 'px' for the border width */
    border-color: #0FB1B8;
}

svg {
    width: 3vh;
    fill: White;
    margin-right: 4%;
}

.containerMaplebkg {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* padding: 10px; */
    /* background-image: url("../images/Logobkg.png"); */
    height: 67vh;
    background-position: -290vh 609vh;
    background-size: cover;
    position: relative;
}
/* Overlay to simulate fading */
.containerMaplebkg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 90%); /* White semi-transparent overlay */
    z-index: 1;
    pointer-events: none; /* Allow interaction with content behind the overlay */

}

/* Ensure that content inside is above the overlay */
.containerMaplebkg > * {
    position: relative;
    z-index: 2;
}
.containerMaplebkgOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.193);
}

.containerMaple {
    position: relative;
    width: 100%;
    /* height: 55%; */
    padding: 5%;
    
    
}

.background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px !important;
}

.overlayMaple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.boxMaple {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    transform: rotate(45deg);
}

.boxMaple.small {
    width: 44px;
    height: 100px;
    top: 5%;
    left: 10%;
    border-radius: 55px
}

.boxMaple.gap {
    width: 200px;
    height: 200px;
    bottom: 20%;
    right: 20%;
    background-color: white;
}


.bubble {
    position: absolute;
    border-radius: 50%;
    background-color: #0fb1b866;
    width: 90px;
    height: 90px;
    animation: bubbleAnimation 2s infinite ease-out alternate;
    z-index: 2; /* Ensure bubbles are above the image */
  }
  
  @keyframes bubbleAnimation {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
  }
  
  #bubble1 {
    top: 11%;
    left: 47%;
  }
  
  #bubble2 {
    top:42%;
    left: 6%;
  }
  
  #bubble3 {
    top: 57%;
    right: 10%;
  }

  .bazzarheader{
    /* position: absolute !important;; */
    width: 100%;
    height: 100%;
    /* top: 40%; */
    text-align: left;
    color: #000000;
    padding:0 1% 0 5%;
}

/* Flexbox layout for the sections */
.containerMaple, .bazzarheader {
    flex: 1;
    padding: 2%;
}

.gradient-button {
    background: white;
    border: none;
    border-radius: 3em;
    color: #333;
    padding: 0.32rem 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.1);
    width: auto;
    max-width: 16rem
}

.arrow-circle {
    
    background-color: #00A9C9;
    border-radius: 50%;
    color: white;
    padding: 01.125em;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); */
    /* margin-right: -12%; */
    /* position: absolute; */
    top: 34%;
    left: 28%;
    /* transform: translate(-22%, 50%);*/
}

.gradient-button span {
    line-height: 1.2em;
}

.horizontal-line {
    width: 80%;
    border: 2px solid #0fb2b8;
    margin-top: 1.5em;
    /* position: absolute; */
    /* bottom: 0%; */
}

/* ********************************* */
.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5% 5% 0 5%;
    position: relative;
    margin-top: 10%;
    /* border-radius: 20px; */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); Shadow for the container */
}

.aboutimage-container {
    position: relative;
    width: 100%; /* Take the full width of the parent */
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

.about-image {
    width: 100%;
    /* max-width: 300px; Restrict max size */
    height: 43vh;
    border-radius: 10px;
    object-fit: fill; /* Ensures image remains proportional */
}

.about-text-box {
    /* flex: 1;
    background: white;
    border-radius: 15px;
    padding: 20px;
    margin-left: -50px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
    text-align: left;
    border: 2px solid #00A9C9;  */
    position: absolute;
    /* bottom: -5%; */
    left: 60%;
    transform: translateX(-46%);
    background-color: white;
    padding: 3% 4%;
    border-radius: 10px;
    box-shadow: 5px 5px #80808024;
    z-index: 1;
    text-align: left;
    /* max-width: 80%; */
    width: 63%
}

.about-text-box h1 {
    margin-bottom: 10px;
    color:  black   ;
}

.about-text-box p {
    color:  black   ;
}

.aboutus-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns the paragraph to the bottom */
    align-items: center; /* Centers the paragraph horizontally */
    /* height: 100vh;  */
    position: relative;
    padding: 5%;
    margin-top: 5%;
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start from below */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
/* Add the class for visible state */
.aboutus-body.visible {
    animation: fadeIn 1s ease-out forwards;
}

/* Add the class for hidden state */
.aboutus-body.hidden {
    animation: fadeOut 1s ease-out forwards;
}

/* Define the animation for fading in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Define the animation for fading out */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.containerheading {
    /* position: absolute; */
    width: 100%;
    /* height: 40%; */
    padding:0 5% 5%;
    text-align: center;

    
}

.box2{
    /* position: absolute !important; */
    width: 100%;
    background-color: #ffffff00;
    /* box-shadow: 0px 14px 60px rgba(0, 0, 0, 0.1); */
    text-align: left;
    padding: 9%;
    padding-top: 0;
    /* top: -2vh; */
    /* z-index: 20000; */
    transform: translate(-104%, -76%);
    color: white;
}

.box2 h1{
    font-weight: bold;
    color: White;
}

.box3{
    position: relative !important;
    width: 100%;
    background-color: #FF914D;
    box-shadow: 0px 14px 60px rgba(0, 0, 0, 0.1);
    text-align: left;
    padding: 4%;
    padding-top: 19%;
    top: -10vh;
    z-index: 1;
    border-radius: 10px
}

.box3 h3{
    color: white;
    /*line-height: 1vh;*/
    font-weight: normal;
}

.box4{
    position: absolute;
    width: 50%;
    top: 64%;
    background-color: #FFFFFF;
    box-shadow: 0px 14px 60px rgba(0, 0, 0, 0.1);
    text-align: left;
    padding: 2%;
    display: table-column;
    left: 0;
}
.box5{
    position: absolute;
    width: 50%;
    top: 64%;
    background-color: #FFFFFF;
    box-shadow: 0px 14px 60px rgba(0, 0, 0, 0.1);
    text-align: left;
    padding: 2%;
    display: table-column;
    right: 0;
}

.Event-heading {
    position: absolute;
    bottom: 0; /* Adjust this value to position the text vertically */
    color: white; /* Set the color of the text (white works well for visibility over the image) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow for better readability over the image */
    /* transform: translate(-200%, -236%); */
    width: 100%;
    padding-left: 4%;
    background-color: rgb(0 0 0 / 60%);
}

.AboutMaker-heading {
    position: absolute;
    bottom: 3vh;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* transform: translate(-200%, -236%); */
    width: 84%;
    /* padding-left: 3%; */
    background-color: rgb(0 0 0 / 34%);
    /* transform: translateX(4%); */
    border-radius: 0 0 10px 10px;
    text-align: center;
}
.Aboutus-heading {
    position: absolute;
    bottom: 0; /* Adjust this value to position the text vertically */
    color: white; /* Set the color of the text (white works well for visibility over the image) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow for better readability over the image */
    /* transform: translate(-200%, -236%); */
    width: 100%;
    padding-left: 4%;
    background-color: rgb(0 0 0 / 17%);
    border-radius: 0 0 10px 10px;
}
.bottom-div{
    background-color: #0fb1b8;
    width: 80%;
    height: 10%;
    position: absolute;
    bottom: -16px;
    left: 5%;
    z-index: -1;
    border-radius: 0 0 10px 10px;
}
.Artist-heading {
    position: absolute;
    bottom: -1vh;
    padding-left: 4%;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    background-color: rgb(0 0 0 / 30%);
    width: 100%;
    border-radius: 0 0 10px 10px;
    
}

.Artist-location {
    /*position: absolute; */
    bottom: 0;
    /* padding-left: 4%; */
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* background-color: rgb(0 0 0 / 17%); */
    width: 100%;
}

.overlay1 {
    position: absolute;
    bottom: 0%;
    /* left: 5%; */
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 0;
    padding: 5%;
    border-radius: 0 0 10px 10px;
        background: linear-gradient(to top, rgb(0 0 0 / 0%), #c6c7c800);
    pointer-events: none;

}


/************************Slider***********************/

.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 71vh;

    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
}

.slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    touch-action: pan-y;
    -webkit-touch-action: none; /* Safari-specific */
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.Instagramhome-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100%;
}

.Homeinstagramcontainer{
    position: relative;
    width: 100%;
    /* padding: 5%; */
    height: 100%
}

.dots {
    text-align: center;
    position: relative;
    /*bottom: 4%;*/
    width: 100%;
}

.dot {
    display: inline-block;
    width: 7px;
    height: 3px;
    margin: 0 0;
    background-color: #bbb;
    /* border-radius: 50%; */
    cursor: pointer;
}

.dot.active {
    background-color: #0FB1B8;
}

.containerMaple1 {
    position: relative;
    width: 100%;
    height: 40%;
    /* padding:5%; */
    height: 64vh;
}

.galleryMaple1 {
    position: relative;
    width: 100%;
    /*height: 40%;*/
    /* padding:5%; */
    height: 63vh;
    /*padding-bottom: 6vh;*/
}

.gallOverlay{
    position: absolute;
    bottom: 0%;
    /* left: 5%; */
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 0;
    padding-bottom: 6%;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to top, rgb(0 0 0 / 0%), #c6c7c800);
    pointer-events: none;
}

.ViewArtistlink{
    width: 100%;
    padding: 1%;
    color: white;
    background-color: #0fb1b8;
    border: none;
    text-align: center;
    text-decoration: none
}

.ViewBazaarlink{
    width: 100%;
    padding: 1%;
    color: white;
    background-color: #0fb1b8;
    border: none;
    text-align: center;
    text-decoration: none
}


.menu {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically */
}

.menu h2 {
    /* font-size: 24px; */
    margin-bottom: 15px;
}

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    margin-bottom: 10px;
}

.menu ul li a {
    text-decoration: none;
    color: black;
    /* font-size: 18px; */
}

.social-media {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: flex-start;
    left: 0%;
    position: relative;
}

.social-media h2 {
    /* font-size: 24px; */
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    flex-direction: row;
    padding: 4% 0;
    gap: 16px;
    /* left: -34%; */
    position: relative
}

.social-icons img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #27c0c3;
    padding: 10px;
}

.social-icons a {
    display: block;
    background-color: #27c0c3;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.social-icons i {
    color: white;
    font-size: 17px;
}


.FooterContactuscontext{
    position: absolute;
    display:flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* left: 0px; */
    /* top: -6%; */
    background-color: #0FB1B8;

    
}
.contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 3% 5%;
    list-style: none;
    
}

.contact-info a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    /* font-size: 18px; */
}

.icon-circle {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    color:black;
    width: 4vh; /* Size of the circle
    height: 6vh; Size of the circle */
    /*border-radius: 50%;  Makes the container circular
    margin-right: 10px; Adds space between the circle and the text */
}

.icon-circle i {
    color: #0fb1b8;  /* Icon color inside the circle */
    font-size: 20px;
}

.contact-info a span {
    display: flex;
    align-items: center;
    padding: 0 6%;
}

.conttxtbox{
    background-color: #ffffff05;
    border: 0px solid;
    border-bottom: 1px solid white;
    border-radius: 0%;
}

.conttxtbox{
    background-color: #ffffff05;
    border: 0px solid;
    border-bottom: 1px solid white;
    border-radius: 0%;
    color: white;
}

.conttxtlbl{
    text-transform: none !important;
}

.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.form-group label {
    width: 30%; /* Adjust width based on your design */
    margin-right: 10px;
    text-align: left;
}

.form-group input {
    width: 70%; /* Adjust width based on your design */
    padding: 8px;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.explore-more {
    color: #0fb1b8;
    text-transform: uppercase;
    z-index: 1;
    cursor: pointer;
    /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    transition: color 0.3s ease;
    /* margin-bottom: 1rem; */
    /* line-height: 11vh;*/
}

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 100%; /* Should be removed. Only for demonstration */
  }
  
  .row{
    width: 100%;
  }
  /* Clear floats after the columns */
  /* .row:after {
    content: "";
    display: table;
    clear: both;
  } */

  .footlogo img {
   
    position: relative;
    width: 429px;
    /* height: 429px; */
    left: 35%;
    top: -11%;
    transform: scale(1)
}

.slider-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    /* gap: 10px; */
}

.slider-counter {
    font-size: 16px;
    color: #333;
}


.prev-slide,
.next-slide {
    background-color: rgb(0 0 0 / 0%);
    color: #0fb1b8;
    border: none;
    /* border-radius: 50%;*/
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all; /* Re-enables clicking on the buttons */
}

.prev-slide {
    margin-left: 10px;
}

.next-slide {
    margin-right: 10px;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire container */
    z-index: -1; /* Positions the video behind other content */
}

/* .home-icon {
    position: fixed;
    bottom: 2%;
    right: 2%;
    background-color: #0fb1b8;
    color: white;
    padding: 2%;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: background-color 0.3s ease;
} */

.home-icon svg {
    /* width: 5%; */
    height: 4vh;
    cursor: pointer;
    fill:#c3ecedbf;
}


/* Hover effects */
/*.prev-slide:hover,*/
/*.next-slide:hover {*/
/*    background-color: rgba(0, 0, 0, 0.8);*/
/*}*/

/***************************** Artist page css *****************************/

.artistgallerygrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns, each taking up equal space */
    gap: 20px; /* Space between the grid items */
}

.artistgallerylist {
    position: relative;
    width: 100%;
    height: 27vh;
    border-radius: 5px;
}

.artgalbackground-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    display: block;
}

.artistabout-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Aligns the paragraph to the bottom */
    align-items: center; /* Centers the paragraph horizontally */
    /* height: 100vh;  */
    position: relative;
    padding: 5%;
    margin: 5%;
    box-shadow: 0px 14px 60px rgba(0, 0, 0, 5%);
    border-radius:5px ;
}




.artistinstagramcontainer{
    position: relative;
    width: 100%;
    /* padding: 5%; */
    height: 100%
}

.artistslider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 100%;
}

.product-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns, each taking up equal space */
    gap: 20px; /* Space between the grid items */
}


.product-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 5px;
    display: block;
}

.product-heading {
    width: 100%;
    margin-bottom: 0;
    /*position: absolute; */
    /* height: 40%; */
    /* padding: 0 5% 5%; */
    /* text-align: start;*/
}
.productlist{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    box-shadow: inset 0px -4px 20px 2px rgba(0, 0, 0, 5%);
    border-radius: 5px
    width: 100%;
    height: 27vh;
}
.productdescription{
    padding: 5%;
}

/* Initially hide all sections */
.section {
    display: none;
}

/* Show a section when it's active */
.section.active {
    display: block;
}

.OtherArtist-heading{
    position: absolute;
    bottom: 2vh;
    left: 4%;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.OtherArtist-location {
    position: absolute;
    bottom: 0; /* Adjust this value to position the text vertically */
    left: 4%;    /* Adjust this value to position the text horizontally */
    color: white; /* Set the color of the text (white works well for visibility over the image) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow for better readability over the image */
    
}

.overlay2 {
    position: absolute;
    bottom: 0%;
    /* left: 5%; */
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 0;
    padding: 5%;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(to top, rgb(0 0 0 / 4%), #c6c7c833);
}

.image { display: none; } /* Hide all images by default */
.visible { display: block; } /* Class to make images visible */


.exploreMoreLink {
    color: #0fb1b8;
    text-transform: uppercase;
    border: none;
    background-color: #ffffff00;
    z-index: 1;
    cursor: pointer;
    padding: 0%;
    height: 100%;
    /* text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); */
    /* transition: color 0.3s ease; */
    /* margin-bottom: 1rem; */
    /* line-height: 11vh;*/
}

button img {
    width: 20px; /* Adjust image size */
    height: 20px;
    margin-right: 10px; /* Space between image and text */
}



.back-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #0fb1b88f;
    transition: background-color 0.3s;
    color: #fff;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
}

.back-icon img {
    width: 30px;
    height: 30px;
}

.back-icon:hover {
    background-color: #0fb1b88f;
}


.fullscreen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0/90%);
    justify-content: center;
    align-items: center;
    z-index: 2000000;
}
  
  .fullscreen-img {
    max-width: 100%;
    max-height: 100%;
  }
  
  .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
  }

  .gallery{
    max-width: 100%;
  }

.span-Exploer{
    right: -73%;
    position: relative;
    background: rgb(251 251 251 / 44%);
    padding: 1% 4%;
    border-radius: 5px;
}

.artistgallerylist.hidden {
    display: none;
  }