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

:root {
  --text-fonts: 'Assistant', sans-serif;
  --text-color: #1e1e1e;
  
  --figure-width : 340px;
  /* --aspect-ratio : 1/1; */
  --aspect-ratio : 3/4;
  /* --aspect-ratio : 9/16; */
  --image-per-row-percent: 50%;         /*(1/number-images-per-row)%, 33% = 3 images, 25% = 4 images, etc.*/
  --gallery-figure-padding: 0 15px 15px 15px; /*top, right, bottom, left */
  --gallery-background-color: #ffffff;
  --image-zoom-hover: 1.0;                   /* 1.0 for no zoom, 1.05 looks nice*/
  --image-opacity-hover: 0.4;                 /* between 0 and 1, 0 = transparent, 1 = no change */
  --image-brightness-hover: 1;                /* between 0 and 1 to darken */
  --gallery-figcaption-align: left;           /* left, center, right */ 
  
  --color-2:rgb(247, 241, 224);
}


::selection {
  background-color: #333;
  color: white;
}

body {
  font-family: var(--text-fonts);
  min-height: 100vh;
  font-size: 16px;
  color: var(--text-color);
  line-height: 1.5;
  background: #ffffff;
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--navbar-text-color);
}

i {
  background:none;
  color:#1e1e1e;
  padding: 4px;
}

i:hover {
  background:#1e1e1e;
  color:#fff;
  padding: 4px;
  border-radius: 8px;
}

h1 {
  font-size:2em;
}


h3 a:hover {
  color: #ffffff;
  background-color: #1e1e1e;
  padding: 0px 5px;
  border-radius: 10px;
  border: 2px solid #1e1e1e;
}

h3 a {
  padding: 0px 5px;
}

p a:hover {
  color: #ffffff;
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 0px 5px;
}

p a {
  padding: 0px 5px;
}

ul {
list-style: none;
}

img {
  max-width: 100%;
}

figcaption {
  font-size: 14px;
  margin-top: 8px;
}

strong {
  font-weight: bold;
}

.text-xxl {
  font-size: 3rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 40px 0 40px;
}

.text-xl {
  font-size: 2.2rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 20px 0 20px;
}

.text-lg {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 0px 0 0px;
}

.text-md {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: normal;
  margin: 10px 0 10px;
}

.text-sm {
  font-size: 1.0rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 5px 0 5px;
  text-align: justify;
}

.text-sm-2 {
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: normal;
  margin: 10px 0 5px;
}

/* ==================================================================================== */
/* Utility Calsses */
/* ==================================================================================== */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px;
}

.container-nav {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
}

/* Button to hide/show sections */

.collapsible {
  /* height: 100px; */
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  /* transition: max-height 0.4s ease-out, opacity 0.4s ease-out; */
}

.collapsible.open {
  opacity: 1;
  max-height: 500px;
}

/* CSS */
.button-6 {
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: .25rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.85);
  cursor: pointer;
  display: inline-flex;
  font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 2rem;
  /* padding: calc(.875rem - 1px) calc(1.5rem - 1px); */
  padding: 10px 20px;
  position: relative;
  text-decoration: none;
  transition: all 250ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}

.button-6:hover,
.button-6:focus {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: rgba(0, 0, 0, 0.65);
}

.button-6:hover {
  transform: translateY(-1px);
}

.button-6:active {
  background-color: #F0F0F1;
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
  color: rgba(0, 0, 0, 0.65);
  transform: translateY(0);
}


.product { padding: 10px; border-bottom: 1px solid #ddd; }

/* .filters { margin-bottom: 20px; } */

select, input { margin-right: 10px; }

.range-labels { margin-top: 5px; font-weight: bold; }

.slider-container {
  position: relative;
  width: 300px;
}

input[type=range] {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none; /* allow overlap */
}

input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  position: relative;
  z-index: 2;
}

/* Filter section */
.filters{
  /* padding-top: 10px;
  padding-bottom: 10px; */
  display: flex;
  flex-flow: row wrap;
}

.filters::after {
  content: " ";
  flex: auto;
}

.filters .filter {
  flex-basis: 33.33333333333%;
  min-width: 0;
  text-align: center;
  /* padding: 20px 20px; */
} 
/*======================================
  Gallery of artwroks for each artist
  ======================================= */

.gallery{
  background: var(--gallery-background-color);
  padding-top: 10px;
  padding-bottom: 10px;
}

.gallery .container {
  display: flex;
  flex-flow: row wrap;
}

.gallery .container::after {
  content: " ";
  flex: auto;
}

.gallery .image {
  flex-basis: 33.33333333333%;
  min-width: 0;
  text-align: center;
  padding: 0 20px;
} 

.gallery figure{
  display: inline-block;
  overflow: hidden;
}

.gallery figure figcaption { 
  margin-top: 0px;
  max-width: var(--figure-width);
}

.gallery figure figcaption p {  
  text-align: var(--gallery-figcaption-align);
  word-wrap: break-word;
  padding-bottom: 10px;
}

.gallery figure img {
  width: var(--figure-width);
  aspect-ratio: var(--aspect-ratio);
  object-fit:cover;
  
}

.gallery figure img:hover {
  cursor: pointer;
  -webkit-filter: grayscale(0);
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  opacity: var(--image-opacity-hover);
  transform: scale(var(--image-zoom-hover));
  filter:brightness(var(--image-brightness-hover));
  
}

/*======================================
Layout for artist's profile page
======================================= */
.artwork{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* CHANGE THE MIN_HEIGHT */
.artwork .container{
  min-height: 80vh;
  display: flex;
  flex-flow: row wrap;
}

.artwork .container::after {
  content: " ";
  flex: auto;
}

.artwork .col {
  flex-basis: 50%;
  min-width: 0;
  text-align: center;
  padding:0 10px;
} 

.col .img {
  max-width: 100%;
}

/*======================================
Layout for artist's profile page
======================================= */
.artwork{
  padding-top: 10px;
  padding-bottom: 10px;
}

.artwork .container{
  min-height: 80vh;
  display: flex;
  flex-flow: row wrap;
}

.artwork .container::after {
  content: " ";
  flex: auto;
}

.artwork .col {
  flex-basis: 50%;
  min-width: 0;
  text-align: center;
  padding:0 10px;
} 

.col .img {
  max-width: 100%;
}

.item1 { grid-area: name; text-align: center;}
.item2 { grid-area: domain; text-align: center;}
.item3 { grid-area: phone; text-align: center;}
.item4 { grid-area: email; text-align: center;}
.item5 { grid-area: social; text-align: center;}
.item6 { grid-area: pp; text-align: center; margin: 0 auto;}
.item6 img{
  border-radius: 10px;
}
.item7 { grid-area: info; text-align: justify; padding-left: 10px;}
.item8 { grid-area: cvfr; text-align: right;}
.item9 { grid-area: cven; text-align: left;}
.item10 {grid-area: blank; text-align: center;}

/* .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    'name name name name name name name name'
    'domain domain domain social phone phone email email'
    'pp pp pp info info info info info'
    'cvfr cvfr cvfr cvfr cven cven cven cven';
  grid-gap: 10px;
} */


.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    'name name name name name name name name'
    'domain domain domain social phone phone email email'
    'pp pp pp info info info info info'
    'cvfr cvfr cvfr cvfr cven cven cven cven';
  grid-gap: 10px;
  /* padding: 10px; */
}

/*=======================
lightbox under artwork
=========================*/

.flexbox-art {
  display: flex;
  row-gap: 20px;
  flex-flow: row wrap;
  justify-content: space-between;
  text-align: center;
  /* padding-top: 30px; */
}

/* format last line */
.flexbox-art::after {
  content: "";
  flex: auto;
}

.flexbox-art .image-art {
  flex-basis: 33.33333%;
  min-width: 0
}

.flexbox-art .image-art img {
  width: 95%;
  /* aspect-ratio: 1/1; */
  object-fit: cover;
}

.flexbox-art figure img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  opacity: 0.4;
}


/* ============================================================
Nav bar
===================================================================*/


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;   /* allows absolute positioning of the center */
  padding: 1rem 2rem;
  background-color: #fff;
  color: #1e1e1e;
}

/* Logo (left) */
.logo {
  font-size: 1.5rem;
  /* font-weight: bold; */
}

/* Centered nav */
.nav-center {
  position: absolute;   /* take out of flex flow */
  left: 50%;            /* move to middle */
  transform: translateX(-50%); /* center it exactly */
  
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Right nav */
.nav-right {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-right li {
  display: inline;
}

.nav-center a,
.nav-right a {
  color: #1e1e1e;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.nav-center a:hover,
.nav-right a:hover {
  color: #bbbbbb;
}




.topnav-mobile {
    display:none;
    text-align: center;
    overflow: hidden;
    background-color: var(--blue-main);
  }
  
  .topnav-mobile a {
    color: #1e1e1e;
    text-align: center;
    padding:5px 10px;
    text-decoration: none;
    font-size: 1.2em;
  }
  
  .topnav-mobile a:hover {
    background-color:white;
    color: #bbbbbb;
  }

  .hamburger-button{
  display:none;
  background: #1e1e1e;  
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1000;
  position: fixed;
  right:11px;
  top: 13px;
}

.hamburger-button .hamburger-line{
  width: 24px;
  height: 3px;
  background: white;
  margin: 4px 0;
  z-index: 1000;
}

.mobile-menu{
  position: fixed;
  top: 0;
  right: -300px;
  width: 150px;
  height: 100%;
  z-index: 999;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  color: #000;
  transition: right 0.3s ease-in-out;
}

.mobile-menu.active {
  right: 0px;
}

.mobile-menu ul {
  margin-top: 100px;
  padding-right: 10px;
  padding-left: 20px;
}
.mobile-menu ul li {
  margin: 10px 0;
}

.mobile-menu ul li a {
  font-size: 20px;
  transition: 0.3s;
  color:var(--blue-dark);
}



/* ================================ 
BANNER
===================================
 */

 .banner {
  position: relative;
  width: 100%;
  height: 400px; /* adjust height as needed */
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures image covers the banner area */
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}



/* =======================================
 two columns
=========================================*/

.two-column {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal columns */
  width: 100%;
  min-height: 400px; /* adjust as needed */
}

.image-col {
  position: relative;
}

.image-col img {
  padding:20px;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the whole column */
  display: block;
}

.text-col {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* align to top */
}

/* =========================
navbar scroll
=============================*/
html {
  scroll-behavior: smooth;
}


/* =========================
pop up
===========================*/

/* Lightbox overlay */
.modal {
  display:none;
  position:fixed;
  z-index:1000;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,0.8);
  justify-content:center;
  align-items:center;
  padding:1rem;
  overflow-y:auto;
}

.modal-content {
  background:#fff;
  display:flex;
  max-width:900px;
  width:90%;
  max-height:100%;  /* cause some overflow of the images*/
  border-radius:8px;
  padding:1rem;
  position:relative;
  gap:1rem;
}

.modal-left {
  flex: 1;
  display: flex;
  flex-direction: column; /* stack children vertically */
  align-items: center;    /* center horizontally */
}

.modal-left img {
  max-width: 100%;
  height: auto; /* keep aspect ratio */
  max-height: 70vh; /* adjust to taste */
}

/* Thumbnails strip under the big image */
.thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.thumbs img.active {
  border: 2px solid #000;
}


.modal-right {
  flex:1;
  overflow-y:auto;
}

.modal-right h2 {
  margin: 0 0 1rem 0; /* top 0, right 0, bottom 1rem, left 0 */
}

.modal-right p {
  margin: 0; /* optional: remove default margin */
  line-height: 1.5; /* optional: nicer text */
}



.close {
  position:absolute;
  top:10px;
  right:15px;
  font-size:2rem;
  cursor:pointer;
}

/* Arrows outside lightbox */
.arrow {
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0, 0, 0, 0.8);
  border:none;
  font-size:2rem;
  cursor:pointer;
  padding:0.3rem 0.6rem;
  border-radius:4px;
  z-index:1010;
}
.arrow:hover {background:rgb(0, 0, 0);}
.left-arrow {left:15px;}
.right-arrow {right:15px;}

/* ==============================
back to top
============================*/
#backToTop {
  display: none; /* hidden by default */
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #333;
  color: white;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}
#backToTop:hover {
  background-color: #555;
}

/* =================================
Contact form
===================================*/
/* Contact form */
form {
  background: #fff;
  padding: 1.5rem;
  max-width: 500px;
  margin: auto;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
label {
  display: block;
  margin-bottom: .3rem;
  /* font-weight: bold; */
}
input, textarea {
  width: 100%;
  padding: .6rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
button {
  background: #333;
  color: #fff;
  border: none;
  padding: .7rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background: #555;
}
.success {
  color: green;
  margin-bottom: 1rem;
}
.error {
  color: red;
  margin-bottom: .5rem;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* three columns */
  align-items: center;
  padding: 1rem 2rem;
  background-color: #fff;
  /* border-top: 1px solid #ddd; */
}

.footer-left a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

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

.footer-center img {
  height: 40px; /* adjust logo size */
  width: auto;
  display: inline-block;
}

.footer-right {
  text-align: right;
}

.footer-right p {
  margin: 0;
  font-size: 14px;
  color: #333;
}



/* Responsive */
@media (max-width: 700px) {
  .arrow { font-size: 1.5rem; padding: 0.1rem 0.4rem; }
  #modalMainImage { max-height: 200px; }

  .site-footer {
    grid-template-columns: 1fr; /* single column */
    text-align: center;
    gap: 0.5rem;
  }
  .footer-right {
    text-align: center;
  }
}


/* @media screen and (max-width:1000px) {


} */

@media screen and (max-width:800px) {
 
  .gallery .image{
    flex-basis: 100%;
  }

   .modal-left-wrapper {
    flex-direction: row; /* still horizontal */
    justify-content: center;
  }
  .arrow {
    font-size: 1.5rem;
    padding: 0.1rem 0.4rem;
  }
  #modalMainImage {
    max-height: 200px;
  }

  .container-nav{
    display:none;
  }
  .topnav-mobile{
    display: block;
  }
  
  .hamburger-button{
    display: block;
  }

  /* CHANGE THIS */
  .two-column {
    display: grid;
    grid-template-columns: 1fr; /* two equal columns */
    width: 100%;
    /* min-height: 400px; */
    text-align:center;
  }

  .text-col {
    padding-top: 0;
    padding-bottom: 10px;

  }

  .filters .filter {
    flex-basis: 50%;
    min-width: 0;
    text-align: center;
    padding: 10px 10px;
  } 

  .gallery .image {
  flex-basis: 50%;
  padding: 0 5px;
} 


.modal-content {
  display:block;
  overflow-y:auto;
}

.modal-right{
  padding-top:20px;
}


}

/* @media screen and (max-width:600px) {


} */