body {
  font-family: Arial, sans-serif;
  background: #272A2F;
  margin: 0;
  color: #fff;
}

header {
  position: sticky;
  top: 0;
  text-align: center;
  padding: 1rem 0;
  background: #212024;
  z-index: 10000;
  /*border-bottom: 1px solid #ccc*/;
}

nav a {
  margin: 0 1rem;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}


a.nav-link-active {
  font-weight: bold;
  color: #8ebbfa;
}

.main-nav2 a:hover {
  justify-content: center;
  color: #8ebbfa;
}

.main-nav2 ul {
  justify-content: center;
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.main-nav3 {
  position: absolute;
  right: 1.5rem; /* adjust padding as needed */
  top: 50%;
  transform: translateY(-50%); /* keeps it vertically centered */
}

.main-nav3 li {
  margin: 0;
  padding: 0;
}


.main-nav3 a {
  display: inline-block; /* ensures spacing is only from gap, not text spacing */
  margin: 0rem;
  padding: 0;
}

.main-nav3 ul {
  list-style: none;
  padding: 0;
  margin: 1rem;
  display: flex;
  gap: 10px;
  justify-content: center;
}



.main-nav3 a:hover {
  justify-content: center;
  color: #8ebbfa;
}

.main-nav a {
  justify-content: center;
  text-decoration: none;
  color:#fff ;
  font-weight: bold;
  transition: color 0.3s ease, background-color 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 4px;
}

.main-nav a:hover {
  color: white;
  background-color: #272A2F; /* or any highlight color */
}


main {
  padding: 2rem;
  max-width: 900px;
  margin: auto;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.gallery img, .highlight img {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


.footer {
  position: bottom;
  left: 0;
  padding: 1rem 0;
  bottom: 0;
  width: 100%;
  background: #212024;
  font-size: 0.9rem;
  text-align: center;
}
.collection-box {
  background: #fff;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 800px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  border-radius: 1px;
  height: auto;
  display: flex;
  flex-direction: column;
}

 /* ------------- IPHONE - gallery -------------- */
  /* ------------- a reverifier!!!! -------------- */

@media screen and (max-width: 767px) {
  .collection-box {
    background: #fff;
    padding: 1rem;
    margin: -2rem;
    max-width: 800px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 1px;
    height: auto;
    display: flex;
    flex-direction: column;
  }
}
 /* ------------- IPHONE - gallery -------------- */





.collection-title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  text-align: left;
  color: #222;
}

.Page_containerr {
  width: 100%;
  min-height: 100vh;        /* Fills at least full screen */
  padding: 2rem;            /* Optional: adds breathing room */
  box-sizing: border-box;   /* Ensures padding doesn't break layout */
  display: flex;
  flex-direction: column;   /* Stack artworks vertically */
}





/* ------------- COMPUTER - about -------------- */

@media screen and (min-width : 1024px) {
  .Page_container {
    flex: 1;
    padding: 2rem;
  }


  .main_text {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1rem;
    z-index: 1; /* default or low value */
  }

  .main_text img {
    max-height: 650px;
    object-fit: contain;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    border-radius: 1px;

    margin-left: -10.5rem; /* ← Try adjusting this */
  }

  .main-info {
    position: absolute;        /* 🔑 This lets it overlay */
    top: -5%;                  /* Adjust this for vertical placement */
    left: 650px;               /* Adjust for horizontal offset */
    right: -160px;
    background: rgba(255, 255, 255, 0); /* #8ebbfa Optional: semi-transparent background */
    padding: 1rem;
    max-width: 500px;
    border-radius: 4px;
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
  }

  .main-info p {
    margin-bottom: 25px;
    color: #fff;
    font-size: 1rem;
    text-align: justify;
  }

} /* ------------- COMPUTER - about -------------- */



/* ------------- IPAD - about -------------- */

@media screen and (min-width : 768px) and (max-width : 1023px) {

  .Page_container {
    flex: 1;
    padding: 2rem;
  }


  .main_text {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 1rem;
    z-index: 1; /* default or low value */
  }

  .main_text img {
    max-height: 380px;
    object-fit: contain;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    border-radius: 1px;

    margin-left: -3rem; /* ← Try adjusting this */
  }

  .main-info {
    position: absolute;        /* This lets it overlay */
    top: -5%;                  /* Adjust this for vertical placement */
    left: 440px;               /* Adjust for horizontal offset 650px*/
    right: -50px;
    background: rgba(255, 255, 255, 0); /* #8ebbfa Optional: semi-transparent background */
    padding: 1rem;
    max-width: 500px;
    border-radius: 4px;
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
  }

  .main-info p {
    margin-bottom: 25px;
    color: #fff;
    font-size: 0.9rem;
    text-align: justify;
  }

  .main-info h2 {
    font-size: 1.1rem;
  }

} /* ------------- IPAD - about -------------- */


/* ------------- IPHONE - about -------------- */

@media screen and (max-width: 767px) {
  .Page_container {
    flex: 1;
    padding: 0.5rem;
  }

  /* Reset layout for mobile */
  .main_text {
    display: flex;
    flex-direction: column; /* stack items vertically */
    align-items: center;    /* center horizontally */
    position: relative;     /* remove absolute stacking */
    margin-bottom: 0;
    z-index: 1;
  }

  .main_text img {
    order: 2;                /* put image *after* the text */
    max-width: 100%;
    height: auto;
    margin-top: 1rem;        /* space between text and image */
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    border-radius: 4px;
  }

  .main-info {
    position: static;        /* no absolute positioning on mobile */
    order: 1;                /* text comes first */
    background: rgba(255, 255, 255, 0); 
    padding:  0.5rem 0.75rem;
    max-width: 100%;
    border-radius: 4px;
    text-align: justify;
  }

  .main-info p {
    margin-bottom: 1rem;
    color: #fff;
    font-size: 1rem;
  }

  .main-nav3 {
    top: 0.5rem;          /* near top of header */
    right: 0.5rem;        /* near right edge */
    transform: none;      /* remove vertical centering */
  }
}

 /* ------------- IPHONE - about -------------- */






.color_box {
  height: 680px;
  width: 800px;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
  border-radius: 1px;
  margin-left: -12.5rem; /* ← Try adjusting this */
  background-color:  #212024; /* any color you like */
  
  display: flex;      /* centers the text */
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  border-radius: 8px; /* optional, rounded corners */
  color: #fff;       /* text color */
  font-size: 1.5rem;  /* text size */
  font-family: sans-serif; /* or your font */
  text-align: center;
}



.artwork {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 6rem; /* 👈 adds space between artworks */
}

/* container around the images */
.art-image-container {
  position: relative;
  width: 300px;   /* controls image size */
}

/* hide all images except the one that is .active */





/* Text section */
.art-info {
  flex: 1;
  line-height: 1.4;
}

.art-info h3 {
  margin-top: 0;
  color: #111;
}

.art-info p {
  margin-top: 0px;
  color: #111;

}


.art-info .description {
  margin-top: 0;
  margin-bottom: 2rem;
  color: #111;
  line-height: 1.4;
}

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

  .art-image-container {
    width: 100%;
    max-width: 320px;
  }
}

.para {
  color: #222;
  margin-bottom: 2.5rem;

}

/* contact links */
a.contact:link {
  color: #8ebbfa;
}

a.contact:hover {
  color: #fff;
}

a.contact:visited { 
  color: #8ebbfa; 
}

a.contact:hover,
a.contact:visited:hover {
  color: #fff;

}


.content {
  height: 10vh; /* Forces scroll space */
  background-color: rgba(255, 255, 255, 0.8); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.contact_box {

  position: fixed;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8); /* or transparent */
  padding: 1rem 2rem;
  z-index: 10;
  margin-bottom: 20cm;

}


.background {
  height: 300vh; /* tall enough to scroll */
  background-image: url('your-big-art-image.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}



.containerr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
}

/* Text and image take up half the width each */
.text, .image {
  flex: 1;
}

/* Make sure the image scales properly */
.image img {
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* Responsive behavior: stack items vertically on small screens */
@media (max-width: 768px) {
  .containerr {
    flex-direction: column;
    text-align: center;
  }

  .text, .image {
    width: 100%;
  }
}


.art-image {
  display: none;       /* hide all images by default */
  width: 100%;         /* fit container */
  height: auto;
  border-radius: 2px;
}

.art-image.active {
  display: block;      /* only the active image shows */
}