* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
 }

 body {
   scroll-behavior: smooth;
   background-color: #fdfdfb;
   color: #333;
 }

 nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
 }

 header {
   background-color: #FFFFFF;
   padding: 5px 0;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
   position: sticky;
   top: 0;
   z-index: 1000;
 }

 .header-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
 }

 .logo {
   font-family: 'Poppins', sans-serif;
   font-size: 28px;
   color: #D3AF37;
   font-weight: 700;
   text-decoration: none;
   flex-shrink: 0;
 }

 .logo:hover {
   color: #D3AF37;
 }

 nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }

 nav ul li {
   margin-left: 25px;
 }

 nav ul li a {
   text-decoration: none;
   color: #555;
   font-weight: 600;
   padding: 8px 0;
   transition: color 0.3s ease, border-bottom 0.3s ease;
   position: relative;
 }

 nav ul li a:hover,
 nav ul li a.active {
   color: #D3AF37;
 }

 nav ul li a::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: -5px;
   left: 0;
   background-color: #D3AF37;
   transition: width 0.3s ease;
 }

 nav ul li a:hover::after,
 nav ul li a.active::after {
   width: 100%;
 }

 .menu {
   display: none;
 }

 @media (max-width:990px) {
   .menu {
     display: block;
   }

   .menu i {
     font-size: 20px;
   }

   .header-content .links {
     display: none;
   }
 }

 /* static header */
 .sidebar {
   height: 100vh;
   width: 300px;
   background-color: rgb(250, 250, 250);
   position: fixed;
   top: 0;
   z-index: 1000;
   box-shadow: 6px 0 10px rgba(0, 0, 0, 0.228);
   transform: translateX(-320px);
   transition: 0.4s ease-in-out all;
 }

 .active {
   transform: translateX(0%);
 }

 .flex-items {
   margin: auto;
   height: 50px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 100%;
   margin-top: 20px;
   padding: 0px 30px 0px 30px;
 }

 .flex-items h2 {
   color: #D3AF37;
   font-weight: 600;
 }

 .close-btn {
   font-size: 30px;
   transition: 0.2s;
   color: rgb(0, 0, 0);
 }

 .close-btn:hover {
   color: #D3AF37;
 }

 .sidebar .menu-links {
   height: 70vh;
   max-width: 100%;
 }

 .sidebar .menu-links .links li {
   text-decoration: none;
   list-style-type: none;
   border-bottom: 1px solid #303030;
   width: 210px;
   margin-top: 15px;
   padding-bottom: 5px;
   transition: transform 0.3s ease;
 }

 .sidebar .menu-links .links li:hover {
   transform: translateX(10px);
   border-bottom: 1px solid #9b8026;
 }

 .sidebar .menu-links .links li:hover a {
   color: #9b8026;
 }

 .sidebar .menu-links .links li:hover i {
   color: #9b8026;
 }

 .sidebar .menu-links .links li a {
   color: rgb(0, 0, 0);
   text-decoration: none;
   list-style-type: none;
   transition: 0.3s ease-in-out;
   position: relative;
   left: 10px;
 }

/* hero section */

 .container-jewellery {
   padding: 0px 40px;
 }

 .jewellery-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   height: 90vh;
 }

 /* Left Section */
 .left {
   flex: 1;
   min-width: 300px;
   padding-left: 40px;
 }

 .intro-text {
   text-transform: uppercase;
   font-size: 0.9rem;
   font-weight: 600;
   color: #555;
   margin-bottom: 10px;
 }

 h1 {
   font-size: 2rem;
   line-height: 1.2;
   font-weight: 700;
   margin: 0;
   text-transform: uppercase;
 }

 .highlight {
   color: #d4af37;
   text-transform: uppercase;
 }

 .description {
   margin: 20px 0;
   font-size: 1rem;
   color: #666;
   max-width: 600px;
 }

 .shop-button {
   display: inline-block;
   padding: 10px 24px;
   border: 2px solid #d4af37;
   color: #000000;
   text-decoration: none;
   transition: 0.3s ease;
 }

 .shop-button:hover {
   background-color: #d4af37;
   color: white;
 }

 /* Right Section */
 .right {
   flex: 1;
   min-width: 300px;
   text-align: center;
   padding-top: 20px;
 }

 .main-img {
   max-width: 100%;
   height: auto;
   border-radius: 12px;
 }

 /* ===== Responsive Styles ===== */

 /* Tablets */
 @media (max-width: 992px) {
   .jewellery-row {
     height: auto;
     flex-direction: column;
     align-items: flex-start;
     padding: 40px 0;
   }

   .left,
   .right {
     width: 100%;
     padding-left: 0;
     text-align: center;
   }

   .description {
     max-width: 100%;
     margin: 20px auto;
   }
 }

 /* Mobile */
 @media (max-width: 576px) {
   h1 {
     font-size: 1.5rem;
   }

   .intro-text {
     font-size: 0.8rem;
   }

   .description {
     font-size: 0.9rem;
     padding: 0 20px;
   }

   .shop-button {
     padding: 8px 20px;
     font-size: 0.9rem;
   }
 }




 /* caursel */

 .carousel {
   position: relative;
   top: 40;
   width: 100%;
   max-width: 1100px;
   margin: auto;
   overflow: hidden;
 }

 .slides {
   display: flex;
   transition: transform 0.5s ease-in-out;
   width: 100%;
 }

 .slide {
   width: 100%;
   flex-shrink: 0;
 }

 .slide img {
   width: 100%;
   height: auto;
   display: block;
 }

 .dots {
   text-align: center;
   margin-top: 10px;
 }

 .dot {
   height: 10px;
   width: 10px;
   margin: 0 8px;
   background-color: #d6ae5f;
   border-radius: 50%;
   display: inline-block;
   opacity: 0.5;
   cursor: pointer;
 }

 .dot.active {
   opacity: 1;
   background-color: #fff;
   border: 2px solid #d6ae5f;
 }



 /* new in */
 .jewellery-item {
   transition: transform 0.3s ease;
   max-width: 500px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   overflow: hidden;
   object-fit: cover;
 }

 .jewellery-item img {
   height: 300px;
   width: 250px;
 }

 /* Overlay */
 .jewellery-item::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background: #d3af37e4;
   /* gold with opacity */
   transform: translateY(-100%);
   transition: transform 0.4s ease-in-out;
   z-index: 1;
 }

 .jewellery-item .overlay-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
   text-align: center;
   z-index: 2;
   opacity: 0;
   transition: opacity 0.3s ease;
 }

 .jewellery-item:hover::after {
   transform: translateY(0);
 }

 .jewellery-item:hover .overlay-content {
   opacity: 1;
 }

 .overlay-content h4 {
   margin-bottom: 8px;
   font-size: 1.5rem;
   text-transform: uppercase;
   font-weight: 900;
 }

 .overlay-content p {
   font-size: 0.8rem;
   margin-bottom: 10px;
 }

 .overlay-content a {
   display: inline-block;
   border: 2px solid white;
   color: #ffffff;
   padding: 6px 12px;
   border-radius: 20px;
   text-decoration: none;
   font-weight: bold;
   transition: background 0.3s ease;
 }

 .overlay-content a:hover {
   background: #ffffff;
   color: #D3AF37;
 }

 .new-in-section {
   padding: 0px 40px 0px 40px;
   text-align: center;
 }

 .title-container {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 80px;
   margin-bottom: 40px;
 }

 .section-title {
   font-size: 1.3rem;
   text-transform: uppercase;
   font-weight: bold;
   color: #d4af37;
 }

 .line {
   width: 200px;
   height: 2px;
   background-color: #333;
 }

 .jewellery-grid {
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
 }



 /* gallery */

 .gallery-container {
   text-align: center;
   padding: 40px 45px 10px 45px;
 }

 .gallery-title {
   color: goldenrod;
   font-size: 24px;
   margin-bottom: 20px;
   font-weight: bold;
 }

 .filter-buttons {
   margin-bottom: 30px;
 }

 .filter-btn {
   border: 1px solid goldenrod;
   background-color: white;
   color: black;
   padding: 10px 15px;
   margin: 5px;
   cursor: pointer;
   transition: 0.3s ease;
 }

 .filter-btn.active,
 .filter-btn:hover {
   background-color: goldenrod;
   color: white;
 }

 .gallery-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
 }

 .item {
   width: 150px;
   height: 150px;
   opacity: 1;
   transition: opacity 0.5s ease;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   /* added shadow */
 }


 .item img {
   width: 100%;
   height: auto;
 }

 .item.hidden {
   opacity: 0;
   pointer-events: none;
   position: absolute;
 }

 /* Lightbox Styles */
 .lightbox {
   display: none;
   position: fixed;
   z-index: 9999;
   padding-top: 50px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-color: rgba(0, 0, 0, 0.9);
   text-align: center;
 }

 .lightbox-img {
   max-width: 90%;
   max-height: 80%;
   margin-top: 50px;
 }

 .close {
   position: absolute;
   top: 30px;
   right: 50px;
   color: white;
   font-size: 40px;
   cursor: pointer;
 }

 .img-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 50px;
   color: white;
   cursor: pointer;
   user-select: none;
   padding: 10px;
 }

 .left-chevron {
   left: 20px;

 }

 .right-chevron {
   right: 10px;

 }


 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: scale(0.95);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }

 .item.fade-in {
   animation: fadeIn 0.5s ease forwards;
 }

 .lightbox-img {
   opacity: 0;
   transition: opacity 0.4s ease;
 }

 .lightbox.show .lightbox-img {
   opacity: 1;
 }


 /*  */

 .item {
   opacity: 1;
   transition: opacity 0.3s ease;
   display: block;
 }

 .item.fade-out {
   opacity: 0;
 }

 .item.fade-in {
   opacity: 1;
   animation: fadeIn 0.4s ease forwards;
 }

 .item.hidden {
   display: none !important;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: scale(0.96);
   }

   to {
     opacity: 1;
     transform: scale(1);
   }
 }


 /* contact */

 .contact .info-item+.info-item {
   margin-top: 40px;
 }

 .contact .info-item i {
   color: var(--accent-color);
   background: color-mix(in srgb, var(--accent-color), transparent 92%);
   font-size: 20px;
   width: 44px;
   height: 44px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50px;
   transition: all 0.3s ease-in-out;
   margin-right: 15px;
 }

 .contact .info-item h3 {
   padding: 0;
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 5px;
 }

 .contact .info-item p {
   padding: 0;
   margin-bottom: 0;
   font-size: 14px;
 }

 .contact .info-item:hover i {
   background: var(--accent-color);
   color: var(--contrast-color);
 }

 .contact .php-email-form {
   height: 100%;
 }

 .contact .php-email-form input[type=text],
 .contact .php-email-form input[type=email],
 .contact .php-email-form textarea {
   font-size: 14px;
   padding: 10px 15px;
   box-shadow: none;
   border-radius: 0;
   color: var(--default-color);
   background-color: color-mix(in srgb, var(--background-color), transparent 50%);
   border-color: color-mix(in srgb, var(--default-color), transparent 80%);
 }

 .contact .php-email-form input[type=text]:focus,
 .contact .php-email-form input[type=email]:focus,
 .contact .php-email-form textarea:focus {
   border-color: var(--accent-color);
 }

 .contact .php-email-form input[type=text]::placeholder,
 .contact .php-email-form input[type=email]::placeholder,
 .contact .php-email-form textarea::placeholder {
   color: color-mix(in srgb, var(--default-color), transparent 70%);
 }

 .contact .php-email-form button[type=submit] {
   color: var(--contrast-color);
   background: var(--accent-color);
   border: 0;
   padding: 10px 30px;
   transition: 0.4s;
   border-radius: 50px;
 }

 .contact .php-email-form button[type=submit]:hover {
   background: color-mix(in srgb, var(--accent-color), transparent 25%);
 }

 .contact-desc {
   max-width: 900px;
   text-align: center;
   color: rgb(92, 92, 92);
   text-transform: none;
   position: relative;
   bottom: 20;
   font-size: 17px;
   font-weight: 100;
   margin: auto;
 }

 .contact .btn-div .btn {
   padding: 10px 70px;
   border: 2px solid #d4af37;
   color: #000000;
   text-decoration: none;
   transition: 0.3s ease;
 }

 .contact .btn-div {
   display: flex;
   justify-content: center;
 }

 .contact .btn-div .btn:hover {
   background-color: #d4af37;
   color: white;
 }

 .error-msg {
   margin-top: 4px;
 }


 /* newsletter */
 .newsletter-section {
   text-align: center;
   padding: 60px 20px;
   max-width: 800px;
   margin: 0 auto;
   max-width: 1200px;
 }

 .newsletter-section h2 {
   font-size: 2rem;
   letter-spacing: 1px;
   color: #2e2e2e;
   margin-bottom: 10px;
 }

 .newsletter-section h1 {
   font-size: 1.8rem;
   color: #D3AF37;
   margin-bottom: 30px;
 }

 .newsletter-form {
   display: flex;
   flex-direction: column;
   align-items: center;
 }

 .newsletter-form input[type="email"] {
   padding: 12px 20px;
   width: 100%;
   max-width: 600px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 1rem;
   outline: none;
   margin-bottom: 20px;
 }

 .newsletter-form button {
   padding: 10px 30px;
   font-size: 1rem;
   border: 2px solid #d4af37;
   background-color: transparent;
   color: #000000;
   cursor: pointer;
   transition: 0.3s;
 }

 .newsletter-form button:hover {
   background-color: #d4af37;
   color: white;
 }

 button {
   cursor: pointer;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 5px;
   transition: 0.3s;

 }

 @media (max-width: 600px) {
   .newsletter-section h1 {
     font-size: 1.5rem;
   }

   .newsletter-section h2 {
     font-size: 1.5rem;
   }

   .newsletter-form input[type="email"] {
     width: 90%;
   }
 }


 /* Footer  */
 .links .nav {
   width: auto;
   gap: 0.50rem;
 }

 .links .nav .bg-links {
   background-color: #D3AF37;
   font-size: 16px;
   border-radius: 50%;
   height: 35px;
   width: 35px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: 0.2s;
 }

 .links .nav .bg-links:hover {
   margin-top: -5px;
   transition: 0.2s;
 }

 .links .nav .bg-links i {
   color: white;
 }

 .list-unstyled a {
   color: black;
   text-decoration: none;
   transition: 0.2s all;
 }

 .list-unstyled a:hover {
   color: #a1852a;
 }