html {
  scroll-behavior: smooth;
  width: 100%;
  border-radius: 5px;
  box-shadow: inset 0 0 10px #736357;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/* Base Header & Layout */
header {
  background-color: #736357;
  width: 100%;
}

.header-container {
  display: flex;
  justify-content: space-between; /* logo left, nav right */
  align-items: center;
  padding: 10px 20px;
  position: relative; /* for dropdown positioning */
}

/* Logo with image */
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  font-size: 24px;
}

.logo-image {
  height: 50px;   /* adjust logo size */
  width: auto;
}

/* Desktop Navigation */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex; /* horizontal list */
}

nav ul li {
  margin-left: 20px; /* spacing between links */
}

nav ul li a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
}

nav ul li a:hover {
  background-color: #C7B299;
  border-radius: 8px;
}

/* Hamburger */
.hamburger {
  display: none; /* hidden on desktop */
  font-size: 28px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}






/*-------------------------------------Text----------------------------------*/
.text-container {
  text-align: center;
  background-color: #F5F0E6;
  padding: 20px 20px;
  color: #35556e;
  opacity: 0.9;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  text-decoration: none;
    background-color: #C7B299;
}

.bttn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #736357;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: transform 0.3s;
}

.text-item {
  color: #736357;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  box-shadow: inset 0 0 10px #736357;
}

.bttn:hover {
  background-color: #C7B299;
  transform: scale(1.05);
}






/*--------------------------------------Slider-------------------------------*/
.slider {
  position: relative;
  justify-content: center;
  width: 100%;
  height: 80vh; /* same height for all slides */
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
  position: relative;
}

/* Slider Buttons (arrows only) */
.slider .prev,
.slider .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  color: white;
  border: none;
  font-size: 36px;
  cursor: pointer;
  z-index: 10;
  padding: 0 10px;
  transition: color 0.3s;
}

.slider .prev:hover,
.slider .next:hover {
  color: #C7B299;
}

.slider .prev {
  left: 20px;
}

.slider .next {
  right: 20px;
}






/*---------------------------------------Gallery Preview---------------------*/
.gallery-preview {
  padding: 50px 20px;
  text-align: center;
  background-color: #F5F0E6;
  color:#736357;
  box-shadow: inset 0 0 10px #736357;
}

.gallery-preview h2 {
  margin-bottom: 30px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s;
}

.gallery-item img:hover {
  transform: scale(1.05);
}

/* Gallery Button */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #736357;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: transform 0.3s;
}

.btn:hover {
  background-color: #C7B299;
  transform: scale(1.05);
}






/*---------------------------------------Contact Preview---------------------*/
.contact-preview {
  padding: 50px 20px;
  text-align: center;
  background-color: #F5F0E6;
  color:#736357;
}

/* BIG logo (50–70% width) */
.contact-preview img {
  width: 100%;           /* adjust to 50% if you prefer */
  max-width: 800px;
  height: auto;
  margin: 0 auto 20px;
  display: block;
  border-radius: 10px;
}

/* Social media button container */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;             /* VERY small space between buttons */
  margin-bottom: 20px;
  align-items: center;
}

/* Social buttons */
.contact-grid a.btn {
  display: block;
  width: 220px;
  padding: 12px 20px;
  background-color: #736357;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
}

/* Contact button under social links */
.bttn {
  display: inline-block;
  padding: 12px 25px;
  background-color: #736357;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
}

.contact-grid a.btn:hover,
.bttn:hover {
  background-color: #C7B299;
}






/*---------------------------------------Privacy ----------------------------*/
.privacy-cont {
  padding: 20px 40px;
  line-height: 1.6;
  margin:auto;
  text-align: left;
  color:#736357;
  background-color: #F5F0E6;
}





/*---------------------------------------Terms ------------------------------*/
.terms-cont {
  padding: 20px 40px;
  line-height: 1.6;
  margin:auto;
  text-align: left;
  color:#736357;
  background-color: #F5F0E6;
}





/*---------------------------------------Footer------------------------------*/
footer {
  background-color: #736357;
  color: white;
  text-align: center;
  padding: 20px;
  box-shadow: inset 0 0 10px #736357;
  font-size: 14px;
}

footer a {
  color: #C7B299;       /* Link color */
  text-decoration: none; 
  margin: 0 8px;        /* Spacing between links */
  transition: color 0.3s;
}

footer a:hover {
  color: white;          /* Change color on hover */
  text-decoration: underline;
}

footer p {
  margin: 0 0 8px 0;     /* Add spacing below copyright */
}





/*---------------------------------------Artist Gallery----------------------*/
/* --- Gallery Styles (preserve your palette) --- */
.artist-gallery {
  padding: 50px 20px;
  text-align: center;
}

.artist-gallery h2 {
  font-size: 2rem;
  color: #35556e;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
}

.artist-gallery h2::after {
  content: '';
  display: block;
  width: 50%;
  height: 3px;
  background-color: #C7B299;
  margin: 10px auto 0;
  border-radius: 2px;
  transition: width 0.3s;
}

.artist-gallery h2:hover::after {
  width: 80%;
}

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

.gallery-item {
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s, filter 0.5s, opacity 0.5s;
  filter: grayscale(30%);
}

.gallery-item img:hover {
  transform: scale(1.1) rotate(1deg);
  filter: grayscale(0%);
  opacity: 0.95;
}

/* Overlay for add to cart */
.gallery-item .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(55,55,55,0.7);
  color: #fff;
  padding: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-item:hover .overlay {
  opacity: 1;
}





/* Section background colors */
.painting { background-color: #F5F0E6; }
.drawing { background-color: #EDE6DD; }
.design { background-color: #DAD2C5; }
.mural { background-color: #D6CEC1; }
.threed { background-color: #B8C7C7; }
.photography { background-color: #CFC7B8; }





/*---------------------------------------Shop Cart--------------------------*/

/*---------------------------------------
   ADD TO CART BUTTONS
----------------------------------------*/
.buy-options button {
  margin: 5px;
  padding: 8px 14px;
  background-color: #C7B299;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #736357;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease;
}

.buy-options button:hover {
  background-color: #736357;
  color: #fff;
}



/*---------------------------------------
   MINI CART POPUP (BOTTOM RIGHT)
----------------------------------------*/
#cart-popup {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #736357;
  color: white;
  padding: 18px 22px;
  border-radius: 12px;
  display: none;
  z-index: 9999;
  width: 260px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  animation: fadeIn 0.3s ease-out;
}

#cart-popup p {
  margin: 5px 0;
  font-size: 16px;
  font-weight: 500;
}

#cart-popup .btn {
  display: inline-block;
  margin-top: 10px;
  background: #C7B299;
  color: #736357;
  padding: 7px 14px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.25s ease;
}

#cart-popup .btn:hover {
  background: #a89077;
}

/* Close popup button */
#close-popup {
  background: #C7B299;
  color: #736357;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 6px;
  font-size: 14px;
  transition: background 0.25s ease, color 0.25s ease;
}

#close-popup:hover {
  background: #fff;
  color: #736357;
}



/*---------------------------------------
   CART SECTION (INSIDE PAGE)
----------------------------------------*/
#shop-cart {
  margin-top: 30px;
  padding: 22px;
  background: #F5F0E6;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}



/*---------------------------------------
   CART ITEM ROW
----------------------------------------*/
.cart-item {
  background: #ffffff;
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 6px solid #C7B299;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.15s ease;
}

.cart-item:hover {
  transform: scale(1.01);
}

.cart-item span {
  font-size: 17px;
  color: #736357;
  font-weight: 600;
}



/*---------------------------------------
   REMOVE BUTTON
----------------------------------------*/
.cart-item button {
  padding: 7px 12px;
  background-color: #C7B299;
  color: #736357;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease;
}

.cart-item button:hover {
  background-color: #736357;
  color: #fff;
}

#checkout-btn {
  margin: 20px 20px;
  padding: 12px 20px;
  background-color: #736357;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.25s ease;
}

/*---------------------------------------
   ANIMATIONS
----------------------------------------*/
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}





/*---------------------------------------Mobile------------------------------*/
/* Mobile & Tablet Adjustments */
@media (max-width: 768px) {
  /* Keep header row so logo + hamburger stay on same line */
  .header-container {
    flex-direction: row;
    align-items: center;
  }

  .hamburger {
    display: block; /* show hamburger only on mobile */
    margin-left: auto;
  }

  /* Hero text responsiveness */
  .hero h1 {
    font-size: 6vw;
  }

  .hero p {
    font-size: 4vw;
  }

  /* Slider height smaller on mobile */
  .slider {
    height: 40vh;
  }

  /* Mobile nav dropdown */
.nav-links {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #736357;
  flex-direction: column;
  height: 0;         /* start collapsed */
  overflow: hidden;
  transition: height 0.3s ease-in-out;
  z-index: 1000;
  padding: 0;
}

/* Show dropdown when hamburger clicked */
.nav-links.active {
  max-height: 1000px;  /* big enough to show all links */
  padding: 10px 0;     /* spacing for links */
}

  .nav-links li {
    width: 100%;
    border-top: 1px solid #C7B299;
    margin: 0;
  }

  .nav-links li a {
    display: block;
    padding: 12px 20px;
  }
}