/* Custom Scrollbar */
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }

 ::-webkit-scrollbar-track {
     background: #0C1E19;
 }

 ::-webkit-scrollbar-thumb {
     background: #C19F55;
     border-radius: 3px;
 }

 /* Smooth Scale Transitions */
 .zoom-hover img {
     transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .zoom-hover:hover img {
     transform: scale(1.08);
 }

 /* Gold metallic text effect */
 .gold-text-metallic {
     background: linear-gradient(135deg, #A37E36 0%, #F3D382 50%, #C19F55 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .header-bg {
     background: #1c291f;
 }

 .brand-logo {
     display: flex;
     width: 100%;
     justify-content: center;
 }

 .brand-logo img {
     width: 150px;
 }

 .header-section {
     background-color: #f9ede1;
 }

 .footer-bg {
     background-color: #f9ede1;
     background-image: url(../img/bg/footer-bg.webp);
     background-repeat: no-repeat;
     background-size: cover;
     background-position: bottom;
     padding-bottom: 300px;
     

 }

 .footer-bottom {
     background-color: #edddc4;
     padding: 10px 0;
 }

 .footer-content-info {
     display: grid;
     grid-template-columns: 80px auto;
     margin-bottom: 10px;
 }


 @media(max-width:1400px) {
     .hero-section-content {
         margin-top: 150px;
     }
 }

 /*.page-breadcrumb {*/
 /*    padding-top: 250px;*/
 /*    background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/banner/2.jpg);*/
 /*}*/


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

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

 .animate-fade-in {
     animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

 #contact-popup-modal .modal-box {
     background-image: linear-gradient(to right, rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url(../img/story/1.jpeg);
     background-position: center;
     background-size: cover;
 }
 
 .category-page #main-header{
     background-color: #f9ede1;
 }
 
  .category-page #main-header nav a,
   .category-page #main-header #top-header a{
      color: #1f2937;
  }
  
   .category-page #main-header svg{
       stroke: #1f2937;
   }
 
 @media(max-width:768px){
         .hero-section-content {
        margin-top: 0px;
    }
    
    .footer-bg {
 
    background-size: contain;
    background-position: bottom;
    padding-bottom: 50px;
}
    
 }