/* nav */
:root {
  --gold: #d4a373;
  --gold-dark: #b97b56;
  --blush: #f7e9e3;
  --text-dark: #222;
  --text-soft: #555;
  --bg-light: #f4f1ee;
}

body {
  background-color: var(--bg-light);
  color: var(--text-dark);
  font-family: "Playfair Display", serif;
  padding-top: 80px;
}

.navbar-nav .nav-link {
  position: relative;
  color: inherit; /* default color */
  transition: color 0.3s ease;
  font-family: "Playfair Display", serif;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: var(--gold);
  transition: width 0.3s ease;
  font-family: "Playfair Display", serif;
}

.navbar-nav .nav-link:hover {
  color: var(--gold);
  font-family: "Playfair Display", serif;
}

.navbar-nav .nav-link:hover::after {
  width: 50%;
  font-family: "Playfair Display", serif;
}

/* Ensure the icon itself can be targeted */
.navbar .nav-link:hover .profile-icon {
  color: var(--gold);
  transition: color 0.3s ease;
  font-family: "Playfair Display", serif;
}


    a {
      text-decoration: none;
      color: var(--text-dark);
      font-weight: 500;
      font-family: "Playfair Display", serif;
    }

    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: white;
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid #eee;
      z-index: 1000; 
      font-family: "Playfair Display", serif;
    }

    .header a {
      margin: 0 20px;
      font-size: 16px;
      transition: color 0.3s ease;
      font-family: "Playfair Display", serif;
    }

    /* .header a.active {
        color: var(--gold);
        border-bottom: 2px solid var(--gold);
        padding-bottom: 2px;
        margin-bottom: 13px;
    } */

    .navbar-links a.active,
    .header a.active {
      position: relative;
      color: var(--gold);
      margin-bottom: 10px;
      font-size: 20;
      font-weight: 900;
      font-family: "Playfair Display", serif;
    }

    .navbar-links a.active::after,
    .header a.active::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -2px;
      transform: translateX(-50%);
      width: 50%; 
      height: 2px;
      font-weight: 900;
      background-color: var(--gold);
      border-radius: 2px;
      margin-bottom: -5px;
      font-family: "Playfair Display", serif;
    }

    .header a:hover {
      color: var(--gold);
      font-family: "Playfair Display", serif;
    }

    .fa-user{
      position: relative;
      left: 300px;
      font-family: "Playfair Display", serif;
    }

body {
    height: 100%;
    width: 100%;
    /* background-image: url(https://img.freepik.com/premium-photo/white-gold-marble-texture-tile-wallpaper-luxurious-background_303085-10654.jpg);
    background-repeat: repeat;
    background-size: cover; */
    margin: 0;
    margin-bottom: 50px;
  }
  
  #logo {
    width: 120px;
    height: 100px;
  }
  
  #header {
    position: relative;
  }
  
  #nav {
    position: relative;
    bottom: 70px;
    float: right;
  }
  
  #nav a {
    display: inline-block;
    padding: 0 30px;
    text-decoration: none;
    color: #D4AF37;
  }
  
/* footer */
    /* footer */
    .footer {
      background-color: white ;
      /* padding: 30px 20px; */
      text-align: center;
      border-top: 1px solid #eee;
    }

    .footer p {
      color: #999;
      font-size: 14px;
    }

footer {
    position: relative; 
    bottom: 0;
    /* top: 30px; */
    width: 100%;
    height: auto; 
    background-color: #D4AF37; 
    color: white;
    padding: 20px;
    text-align: center;
  }
  footer.text-center.py-4 {
    margin: 0;
    padding-bottom: 0;
}
  footer ul {
    list-style: none; 
    margin: 0;
    padding: 0;
  }
  
  footer li {
    display: inline-block;
    margin-right: 20px;
  }
  
  footer a {
    text-decoration: none;
    color: white;
    background-color: #D4AF37; 
  }
  
  footer a:hover {
    color: #D4AF37;
    background-color: white;
  }
  
  /* #footer1 {
    position: absolute;
    background-color: #D4AF37;
    top: 1180px;
  } */
  
  #cart {
    width: 40px;
    height: 40px;
    position: relative;
    bottom: 10px;
  }
  #insta{
    position: relative;
    right: 70px;
    bottom: 10px;
    width: 90px;
    height: 90px;
  }
  .insta{
  position: relative;
  left: 40px;
  bottom: 70px;
  }
  #fera{
    position: relative;
    bottom: 50px;
    right: 70px;
    width: 70px;
    height: 70px;
  }
  .fera{
    position: relative;
    left: 40px;
    bottom: 100px;
  }
  .footer-icons a:hover {
    text-decoration: none;
    color: none;
  }
  
  .footer-icons a:hover img {
    filter: none;
    transform: none;
  }
  .footer-content .col-md-4 {
    text-align: center;
  }
  .footer-icons p {
    margin-right: 10px;
  }
  #shop{
    position: relative;
    right: 10px;
  }
  #visa{
    width: 60px;
    height: 60px;
  }
  #mastercard{
    width: 60px;
    height: 60px;
  }
  #maestro{
    width: 80px;
    height: 50px;
  }
  #applepay{
    width: 100px;
    height: 60px;
  }
  #tymebank{
    width: 85px;
    height: 50px;
  }
  
  /* home */
  
  #h2 {
    font-size: 40px;
    font-family: sans-serif;
    margin-bottom: 30px;
    position: relative;
   bottom: 60px;
  }
  
  #para {
    font-size: 18px;
    line-height: 2pc;
    margin-bottom: 30px;
    font-family: sans-serif;
    position: relative;
    bottom: 20px;
  }
  
  #explore {
    padding: 10px 20px;
    background-color: #D4AF37;
    color: #ffffff;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    position: relative;
    bottom: 10px;
  }
  
  .imge {
    animation: rotateImage 3s infinite linear;
    position: relative;
    bottom: 30px;
  }
  
  
  @keyframes rotateImage {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  
  #title1 {
    position: relative;
    left: 370px;
    bottom: 110px;
  
  }
  
  #Popular1 {
    height: 200px;
  }
  
  #item {
    list-style-type: none;
    /* position: relative;
    right: 40px; */
  }
  
  
  #heading {
    position: relative;
    left: 550px;
    bottom: 550px;
    color: #D4AF37;
  }
  
  
  .card-group{
    display: flex;
    justify-content: space-between;
  }
  #pict{
    height: 475px;
  }
  
  .card-group{
    margin-bottom: 100px;
    margin-top: 50px;
    display: flex
  }
  
  #card1 {
   width: 250px;
   margin-left: 20px;
  }
  #pop{
    text-align: center;
    margin-top: 80px;
    text-decoration: underline;
  }

  .row{
    margin-top: 50px;
  }

  .col-md-3{
    margin-top: 50px;
  }
  
  #prices{
    position: relative;
    top: 25px;
    background-color: none;
    color: #888;
  }
  
  #price{
    position: relative;
    top: 23px;
    background-color: none;
    color: #888;
  }
  
  #pri{
    background-color: none;
    color: #888;
  }
  
  #pric{
    color: #888;
    background-color: none;
    position: relative;
    top: 23px;
  }

  .foot{
    background-color: #D4AF37;
    color: white;
  }
.card {
    width: 20rem; 
    margin: 10px; 
    border: 2px solid #D4AF37;
    border-radius: 10px; 
    box-shadow: 0 0 10px #D4AF37;
}
 #card1, #category1, #category2, #category3, #category4 {
    display: inline-block;
}
#plus {
    width: 40px;
    height: 40px;
    position: relative;
    left: 170px;
  }

  
  /* About */
  :root {
    --gold: #d4a373;
    --gold-dark: #b97b56;
    --blush: #f7e9e3;
    --text-dark: #222;
    --text-soft: #555;
    --bg-light: #f4f1ee;
  }

      .navbar {
      border-bottom: 2px solid var(--gold);
    }
  
    .cart-count-badge {
      background-color: #d4a373;
      color: white;
      border-radius: 50%;
      padding: 2px 6px;
      font-size: 12px;
      position: relative;
      top: -10px;
      left: -5px;
    }

  body {
    font-family: "Playfair Display", serif;
    background-color: var(--bg-light);
    color: var(--text-soft);
    /* margin-top: 80px; */
  }
  
  .hero {
    background-color: var(--blush);
    padding: 80px 0;
    color: var(--text-dark);
    margin-top: 0px;
    font-family: "Playfair Display", serif;
  }
  
  .hero h1 {
    color: var(--gold-dark);
    font-weight: bold;
    font-family: "Playfair Display", serif;
  }
      .nav-link.active, .nav-link:hover {
      color: var(--gold);
      font-weight: 900;
    }
  
  .about-section h2{
    color: var(--gold-dark);
    font-family: "Playfair Display", serif;
    font-size: 45px;
    text-align: center;
  }
  .mission-section h2{
    color: var(--gold-dark);
    font-family: "Playfair Display", serif;
    font-size: 45px;
  }
  .team-section h2 {
    color: var(--gold-dark);
    font-family: "Playfair Display", serif;
    font-size: 45px;
  }
  
  .about-section p{
    font-size: 1rem;
    color: var(--text-soft);
    font-family: "Playfair Display", serif;
    font-size: 18px;
    text-align: justify;
  }

  .mission-section p{
    font-size: 1rem;
    color: var(--text-soft);
    font-family: "Playfair Display", serif;
    font-size: 18px;
    /* text-align: justify; */
  }
  .team-section p {
    font-size: 1rem;
    color: var(--text-soft);
    font-family: "Playfair Display", serif;
    font-size: 18px;
    text-align: justify;
  }
  
  .mission-section {
    background-color: var(--blush);
    font-family: "Playfair Display", serif;
    font-size: 18px;
    text-align: center;
  }

  .text-muted{
    text-align: center !important;
  }

  .niki{
    font-family: "Playfair Display", serif;
    font-size: 22px;
  }

  .shadow{
    width: 300px; 
    height: 200px;
    object-fit: cover;
    text-align: center;
  }
  
  footer {
    font-size: 0.9rem;
    font-family: "Playfair Display", serif;
  }

  /* Tablet */
@media (max-width: 991.98px) {
  .container,
  .hero,
  .about-section,
  .mission-section,
  .team-section {
    padding-left: 20px;
    padding-right: 20px;
    max-width: 100% !important;
    width: 100%;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1.1rem;
  }

  .about-section .row {
    flex-direction: column;
    text-align: center;
  }

  .about-section img {
    margin-bottom: 20px;
    width: 100%;
    max-width: 400px;
    height: auto;
  }

  .team-section .row {
    flex-direction: column;
  }
  .niks {
    margin-left: 250px;
  }

  .team-section img {
    width: 150px;
    height: 150px;
  }
}

@media (max-width: 767.98px) {
  .hero {
    padding: 60px 20px;
  }

  .about-section,
  .mission-section,
  .team-section {
    padding: 30px 15px;
  }

  .about-section h2,
  .mission-section h2,
  .team-section h2 {
    font-size: 1.5rem;
  }

  .about-section p,
  .mission-section p,
  .team-section p {
    font-size: 0.95rem;
  }

  footer {
    font-size: 0.85rem;
    padding: 15px;
  }
}

/* Small phones and extra small devices */
@media (max-width: 575.98px) {
  .hero {
    padding: 50px 10px;
    text-align: center;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .about-section,
  .mission-section,
  .team-section {
    padding: 20px 10px;
  }

  .about-section h2,
  .mission-section h2,
  .team-section h2 {
    font-size: 1.6rem;
  }

  .about-section p,
  .mission-section p,
  .team-section p {
    font-size: 0.9rem;
  }

  .team-section img {
    width: 120px;
    height: 120px;
  }

  .btn-primary {
    width: 100%;
    font-size: 1rem;
  }

  .niks{
    margin-left: 0px !important;
  }

  footer {
    font-size: 0.8rem;
    padding: 10px;
    text-align: center;
  }
}


  /* Products */
  
  /* #H3{
  color: #D4AF37;
  text-decoration: underline;
  position: relative;
  left: 600px;
  }
  
  .nav-underline {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    list-style-type: none;
  }
  
  .nav-underline a {
    text-decoration: none;
  
  }
  
  #toggler {
    position: relative;
    right: 1300px;
    top: 20px;
    color: #D4AF37;
  }
  
  #search {
    width: 300px;
  
  }
  #search-input{
    background-color: white !important;
    color: #D4AF37;
  }
  .sort{
    font-weight: bold;
    color: #D4AF37;
  }
  .sorted{
    color: #D4AF37 !important;
  }
  #but {
    color: #D4AF37;
    outline: #D4AF37;
    position: relative;
    right: 10px;
  }
  #but:hover{
    background-color: #D4AF37;
    color: white;
  }
  
  #links .nav-link {
    color: #D4AF37;
  }
  
  #main {
    margin-top: 5%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5%;
    padding: 5%;
    text-align: center;
  }
 
  /* div{
    width: 300px;
    height: 550px;
    } */
  
  img {
    width: 250px;
  }
  
  
  #main-div img {
    width: 50%;
  }
  #viewmore{
    background-color: #CFB53B;
    color: white;
    border: none;
    border-radius: 4px;
  }
  .purchase{
    background-color: #CFB53B;
    color: white;
    border: none;
  }
  
  .modal {
    display: none;
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }
  
  .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 10% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 50%; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  
  @keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  
  #modalImg {
    max-width: 100%;
    height: auto;
  }
  
  #modalDescription {
    margin-top: 15px;
    text-align: left;
  }
  
  .item-price {
    color: #333;
    font-size: 24px;
    font-weight: bold;
  }
  
  #main-div {
    margin-bottom: 20px;
    text-align: center;
  }
  
  .item-image {
    width: 100%;
    max-width: 300px; 
    margin-top: 10px;
    cursor: pointer;
    transition: transform 0.2s;
  }
  
  .item-image:hover {
    transform: scale(1.05); 
  }

  #items-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; 
    text-align: center;
}

.item-container {
    flex: 0 1 calc(33.333% - 16px); 
} */



  /* admin */
  #ffoott{
    position: relative;
    top: 1020px;
  }
  .tbody{
    margin-bottom: 60px;
  }
  #btnd{
    /* position: relative;
    top: -10px;
    left: 5px;
    margin-top: 30px; */
    padding: 4px;
    background-color: #d4a373 !important;
    color: white !important;
    border: none !important;
  }
  #btnd:hover{
  background-color: #b97b56 !important;
  color: white !important;
  }
  .table-bordered{
    position: relative;
    bottom: 370px;
  }
  #navb{
    position: relative;
    top: -70px
  }
  #navb a {
    display: inline-block;
    padding: 0 30px;
    text-decoration: none;
    color: #D4AF37;
  }
  #closse{
    background-color: #d4a373!important;
    color: #ffffff !important;
  }
  #closse:hover{
    background-color: #b97b56 !important;
    color: white !important;
  }
#addProductButton{
  background-color: #d4a373;
    color: #ffffff;
    position: relative;
    top: 0px;
}
#addProductButton:hover{
  background-color: #b97b56;
  color: white;
}
#clearInputsButton{
  background-color: #d4a373;
  color: #ffffff;
}
#clearInputsButton:hover{
  background-color: #b97b56;
  color: white;
}
.edit-btn{
  background-color: #d4a373;
  color: white;
  border: none;
  border-radius: 4px;
  margin-top: 3px;
}
.edit-btn:hover{
  background-color: #b97b56;
  color: white;
}
.remove-btn{
  background-color: #d4a373;
  color: white;
  border: none;
  border-radius: 4px;
  margin-top: 5px;
}
.remove-btn:hover{
  background-color: #b97b56;
  color: white;
}
.iimage{
  width: 100px;
  height: 100px;
}
.pprice{
  width: 70px;
}

  /* Checkout */
  body{
    font-family: "Playfair Display", serif;
  }
  .checkout-item-image {
    width: 60px;
    height: auto;
    border-radius: 8px;
  }
  
  .cart-count-badge {
    background-color: #d4a373;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    position: relative;
    top: -10px;
    left: -5px;
  }
  
  #checkout-container {
    position: relative;
    top: 450px;
    background-color: #f4f1ee;
    padding: 20px;
    border-radius: 10px;
  }
  
  .remove-item-btn {
    background-color: #d4a373;
    border: none;
    border-radius: 5px;
    color: white;
  }
  
  .remove-item-btn:hover {
    background-color: #ffffff;
    color: #d4a373;
  }
  
  #table-bordered {
    position: relative;
    top: 100px;
    margin-bottom: 60px;
    background-color: white;
  }
  
  .btn5 {
    width: 200px;
    position: relative;
    left: 690px;
    bottom: 338px;
    padding: 12px;
    background-color: #d4a373;
    color: white;
    border-radius: 5px;
    border: none;
  }
  
  .btn5:hover {
    background-color: white;
    color: #d4a373;
  }
  
  .checkout-item-image {
    height: 70px;
    width: 70px;
  }
  
  #foot {
    margin-top: 70px;
  }
  
  /* .clear-cart-btn {
    background-color: #d4a373;
    color: white;
    border: none;
    padding: 9px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    left: 1370px;
    bottom: 650px;
  }
  
  .clear-cart-btn:hover {
    background-color: white;
    color: #d4a373;
  } */
  .clear-cart-btn {
    margin-bottom: 1rem; 
  }

  #continue-shopping{
    background-color: #d4a373 !important;
    color: white;
    border-radius: 5px;
  }

  #continue-shopping:hover{
    background-color: white !important ;
    color: #d4a373 !important;
  }
  
  .empty-cart-message {
    text-align: center;
    padding: 2rem;
    font-size: 1.3rem;
    color: #555;
    background-color: #f4f1ee;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 150px;
  }
  
  .empty-cart-message .browse-btn {
    margin-top: 1rem;
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: #d4a373;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
  }
  
  .empty-cart-message .browse-btn:hover {
    background-color: white;
    color: #d4a373;
  }

  
  .content {
    flex: 1; /* Take up remaining space */
    /* padding: 40px 20px;  */
  }
  
  #foot {
    background-color: #f4f1ee;
    color: #222;
    text-align: center;
    /* padding: 20px; */
  }

  footer {
    background-color: white;
    border-top: 3px solid var(--gold);
    padding: 2rem 1rem;
    margin-top: 4rem;
  }

  footer p {
    text-align: center;
    margin: 0;
    color: var(--text-soft);
  }  

  
  

/* payment */
#foots{
  margin-top: 180px;
}
.row {
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; 
  flex: 25%;
  background-color: #f2f2f2;
  border: 1px solid #D4AF37;
  height: auto;
  margin-bottom: 160px;
}

.col-50 {
  -ms-flex: 50%; 
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; 
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container5 {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid #D4AF37;
  border-radius: 3px;
  height: 680px;
}

.input5 {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #D4AF37;
  border-radius: 3px;
  font-style: italic;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn8 {
  background-color: #d4a373;
  color: white;
  padding: 12px;
  border: none;
  width: 15%;
  border-radius: 5px;
  font-size: 17px;
  position: relative;
  left: 560px;
}

#continue-shopping{
  background-color: #D4AF37;
  color: white;
  padding: 12px;
  position: relative;
  left: 310px;
  bottom: 340px;
  border: none;
  border-radius: 4px;
}
.btn8:hover {
  background-color: #ffffff;
  color: #b97b56;
}

span.price {
  float: right;
  color: black;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}

.message{
  position: relative;
  top: 150px;
  left: 550px;
}

#tnx{
  color: #D4AF37;
}

#place{
  color: #D4AF37;
  position: relative;
  left: 90px;
}

.return{
  text-decoration: none;
  border: none;
  border-radius: 5px;
  background-color: #D4AF37;
  color: white;
  position: relative;
  left: 135px;
  padding: 12px;
}

.return:hover{
  background-color: white;
  color: #D4AF37;
}

.cart-item-image{
  width: 80px;
  height: 70px;
}

.price{
  font-size: medium;
  font-weight: lighter;
  margin-top: 50px;
}

.container .subtotal span{
  font-size: large;
  font-weight: bold;
  border-top:2px solid #D4AF37;
}

.container .subtotal {
  font-weight: bold; 
  /* border-top:2px solid #D4AF37; */
  
}
.button-pressed {
  transform: scale(0.9);
  transition: transform 0.1s ease; 
}

input{
  color: #D4AF37
  ;
}

#continue-shopping:hover{
  background-color: white;
  color: #D4AF37;
}

/* Contacts */
#contacts{
  font-size: 35px; 
  color:  #D4AF37;
  position: relative;
  bottom: 155px;
  right: 460px;
}

#row{
  margin-left: 150px;
}

.col{
  position: relative;
  top: 50px;
  left: 90px;
}
#pic1{
  height: 80px;
  width: 60px;
  position: relative;
  bottom: 120px;
  left: 30px;
}
#pic2{
  height: 50px;
  width: 60px;
  position: relative;
  bottom: 105px;
  left: 37px;
}
#pic3{
  width: 60px;
  height: 70px;
  position: relative;
  bottom: 90px;
  left: 35px;
}


#pic5{
  height: 70px;
  width: 70px;
  position: relative;
  bottom: 78px;
  left: 29px;
}


#btn{
  background-color: #D4AF37;
  border: none;
  width: 90px;
  height: 30px;
  position: relative;
  top: 20px;
  left: 160px;
  border-radius: 8px;
}

#btn:hover{
  background-color: white;
  color: #D4AF37;
}

.questios{
position: relative;
bottom: 190px;
color: #D4AF37;
font-weight: bold;
}

#col{
position: relative;
top: 90px;
}