/*-------------------------------------
        2. Top-area
--------------------------------------*/
/* Top Bar Styles */

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #601e5b; /* Maroon color */
    padding: 25px 20px; /* Adjusted padding for smaller height */
    color: white;
    height: 20px; /* Height set to 20px */
    position: sticky;
  }
  
  .social-icons {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .social-icons li {
    margin: 0 10px;
  }
  
  .social-icons li a {
    color: white;
    font-size: 18px; /* Reduced icon size to match smaller height */
    text-decoration: none;
  }
  
  .social-icons li a:hover {
    color: #ffcc00; /* Yellow hover color */
  }
  
  .contact-info p {
    margin: 0;
    font-size: 14px; /* Adjusted font size */
    color: white;
  }
  
  /* Hide phone and mail on small screens */
  @media (max-width: 600px) {
    .contact-info {
      display: none; /* Hide contact info on small screens */
    }
  }
  
  /* Display phone and mail in a line on larger screens */
  @media (min-width: 601px) {
    .contact-info {
      display: flex; /* Show contact info on larger screens */
      gap: 10px; /* Space between the phone and email */
    }
  }
  
nav.navbar.bootsnav {
    background-color: white;
    border-bottom: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.wrap-sticky nav.navbar.bootsnav.sticked {
    background-color:#ffffff;
    /* background-color:#2a2d54; */
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
}

/*.navbar-brand*/
.navbar-header a.navbar-brand,.navbar-header a.navbar-brand:hover,.navbar-header a.navbar-brand:focus{
    display: flex;
    /* display: inline-block; */
    color: #ffffff;
    font-size: 24px;
    letter-spacing: 3px;
    font-family: 'Rufina', serif;
    font-weight: 700;
    padding: 8px 0px;
    text-transform:uppercase;
}
.navbar-header a.navbar-brand span{display: inline-block;
  /* color:#4e4ffa; */
  color: #546022;
  text-transform:capitalize;}

.wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand,.wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand:hover,.wrap-sticky nav.navbar.bootsnav.sticked .navbar-header a.navbar-brand:focus {padding:38px 0px;}
/*.navbar-brand*/

/*.nav li*/
nav.navbar.bootsnav ul.nav > li > a {
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    text-transform:uppercase;
    -webkit-transition: 0.3s linear; 
    -moz-transition: 0.3s linear; 
    -ms-transition: 0.3s linear; 
    -o-transition: 0.3s linear; 
    transition: 0.3s linear;
}
nav.navbar.bootsnav ul.nav > li > a {
    padding: 10px 21px;
    padding-top: 15px;
}
nav.navbar.bootsnav ul.nav > li > a:hover,nav.navbar.bootsnav ul.nav > li > a:focus{color:#546022;}
nav.navbar.bootsnav ul.nav > li.active>a {color: #746211;}

nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after {
    content: "";
}
nav.navbar.bootsnav ul.nav > li.dropdown span {
    font-size: 8px;
    margin-right: 15px;
}
.wrap-sticky nav.navbar.bootsnav.sticked ul.nav > li > a{padding:30px 25px;}
/*.nav li*/

/*.menu-ui-design*/
.menu-ui-design{overflow-y:scroll;height: 350px;}
.menu-ui-design::-webkit-scrollbar {
    width:5px;
}
.menu-ui-design::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 8px #ffffff;
}
.menu-ui-design::-webkit-scrollbar-thumb {
  background-color: #000000;
}
/*.menu-ui-design*/

/*.navbar-toggle */
nav.navbar.bootsnav .navbar-toggle {
    position: relative;
    background-color: transparent;
    border: 1px solid #000000;
    padding: 10px;
    top: 0;
}
nav.navbar.bootsnav .navbar-toggle i{color: #000000;}
/*.navbar-toggle */

/*-------------------------------------
        3.  Welcome-hero
--------------------------------------*/
.welcome-hero-product {
    position: relative;
    background:url(../images/welcome-hero/product-bg.png)no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
}

.welcome-hero-product:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(42,45,84,.60);
    z-index: -1;
}


.header-area{position: absolute;top:0;left:0;width: 100%;z-index: 99;}

/*.welcome-hero-txt*/
.welcome-hero-txt{text-align: center;padding:290px 0 372px;}
.welcome-hero-txt h2 {
    font-size: 42px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 45px;
}
.welcome-hero-txt p {
    font-size: 18px;
    text-transform: initial;
    color: #fff;
    font-weight: 500;
    max-width: 735px;
    margin: 0 auto;
}
.welcome-btn {
    display: inline-block;
    width: 230px;
    height: 60px;
    background: #4e4ffa;
    color: #fff;
    border-radius: 3px;
    margin-top: 55px;
    -webkit-transition: .3s linear; 
    -moz-transition:.3s linear; 
    -ms-transition:.3s linear; 
    -o-transition:.3s linear;
    transition: .3s linear;
}
.welcome-btn:hover{
    background: #0102fa;
}


/* Products list*/


/* body {
    font-family: Arial, sans-serif;
}
h1,p {
text-align: center;
} */
/* Base styles */
/* Animation for sliding in from the left */

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation for sliding in from the right */
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Apply sliding animation to each post */
.post.animate-left {
    animation: slideInFromLeft 0.5s ease-out forwards;
}

.post.animate-right {
    animation: slideInFromRight 0.5s ease-out forwards;
}

.products {
    margin: 35px auto;
}

.product-container {
    background-color: #f8f9fbc7;
    max-width: 1200px;
    margin: 35px auto;
    padding: 20px;
}

.tag-buttons-container {
    display: flex;
    max-width: 800px;
    margin: 0 auto;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.tag-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    white-space: nowrap;
    overflow-x: auto; /* Makes the tag section scrollable on smaller screens */
}

.tag-button {
    padding: 5px 15px;
    border-radius: 5px;
    background-color: #546022;
    color: white;
    border: none;
    cursor: pointer;
    white-space: nowrap; /* Ensures text doesn’t break */
}

.tag-button:hover {
    background-color: #ecce49;
}

.tag-button.active {
    background-color: #ecce498f;
    color: white;
}

.posts-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4-column grid */
    gap: 20px; /* Space between posts */
    margin-top: 20px;
    transition: all 0.3s ease; /* Smooth transition */
}

.post {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    text-align: center;
    background-color: #f9f9f9;
    opacity: 0; /* Start with the posts hidden */
}

.post img {
    width: 100%;
    height: 150px;
    object-fit: fill;
    border-radius: 8px;
    margin-bottom: 10px;
}

.post h1 {
    font-size: 2.2rem;
    margin: 10px 0 0;
}

.brand > .mem-container {
    width: 978px;
}

.mem-container > .brand-area {
    margin-top: 44px;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .posts-container {
        grid-template-columns: repeat(3, 1fr); /* 3-column grid on medium screens */
    }
    .tag-buttons-container {
        max-width: 600px; /* Adjust tag buttons container width */
    }
}

@media (max-width: 992px) {
    .posts-container {
        grid-template-columns: repeat(2, 1fr); /* 2-column grid on small screens */
    }
    .tag-buttons-container {
        max-width: 100%; /* Full width for small screens */
    }
}

@media (max-width: 768px) {
    .posts-container {
        grid-template-columns: 1fr; /* 1-column grid on mobile screens */
    }
    .product-container {
        padding: 15px; /* Adjust padding for small screens */
    }
}

@media (max-width: 480px) {
    .post h1 {
        font-size: 1.5rem; /* Adjust title font size for small screens */
    }
    .tag-button {
        padding: 5px 10px; /* Smaller button padding */
    }
}