/* custom.css */
:root {
    /* Primary Color Palette */
    --color-brand-primary: #131A22; /* Main primary color */
    --color-brand-primary-light: #2C3744; /* Lighter shade of primary */
    --color-brand-primary-dark: #0F141A; /* Darker shade of primary */
    
  
     /* Secondary Color Palette */
     --color-brand-secondary: #F4AB31; /* Main secondary color */
     --color-brand-secondary-light: #FFC773; /* Lighter shade of secondary */
     --color-brand-secondary-dark: #f3a32b; /* Darker shade of secondary */
     /* --color-brand-secondary-dark: #C17E1C; Darker shade of secondary */
     /* --color-brand-secondary-mid: #fbc16a; */

     --color-brand-tertiary: #232F3E; /* Main secondary color */
  }
  
  /* Ensure the body takes the full height of the viewport */
  html, body {
    height: 100%;
    margin: 0;
    
  }
  
  /* h1 {
    color: #C17E1C ;
  } */
  /* Set the body to be a flex container */
  body {
    display: flex;
    flex-direction: column;
    font-family: 'Arial', sans-serif;
  }
  
  /* Make the main content area take available space */
  main {
    flex-grow: 1;
  }
  
  /* Footer styling */
  .footer-custom {
    background-color: var(--color-brand-tertiary); 
    color: white;
    padding: 20px;
    text-align: center;
  }
  
  
  /* Navbar styling */
  .navbar-custom {
  
    background-color: var(--color-brand-primary); 
  
    
  }
  
  /* Smooth fade effect for the content */
#featured_posts,
#latest_posts {
   
    transition: opacity 0.5s ease-in-out; /* Smooth transition over 0.5 seconds */
    min-height: 400px; /* Adjust based on your content */
    position: relative; /* For smooth animation if loading indicators are added */
}

/* Loading state styling */
.loading {
  opacity: 0.5; /* Dim the content */
  pointer-events: none; /* Disable interactions */
}

/* static/css/custom.css */
/* body {
  background-color: yellow !important;  */
  /* If your background turns yellow, the CSS is working */
/* } */

/* Mobile Navigation */
#mobile-nav{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 50%; /* Half the screen width */
  background-color: white;
  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%); /* Initially hidden off-screen */
  transition: transform 0.3s ease-in-out;
  /* padding: 1rem; */
  display: flex;
  flex-direction: column; /* Stack links vertically */
  align-items: start; /* Align links to the left */
  /* background-color: #0F141A; */
}

#mobile-nav.show {
  z-index: 2001;

  transform: translateX(0); /* Slide into view */

}

/* Style navigation links */
#mobile-nav nav {
  width: 100%;
  /* background-color: aqua; */
}

#mobile-nav  a {
  display: flex;
  /* padding: .5rem; */
  /* width: 100%; */
  font-size: 1rem;
  color: black;
  text-decoration: none;
  /* background-color: #C17E1C; */
}

#mobile-nav nav a:hover {
  background-color: #f3f3f3;
}

/* Ensure the menu toggle button is visible */
#menu-toggle {
  z-index: 3001;
  position: relative;

}


/* Close Button - fa-times */
#mobile-nav .close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 1rem; /* Adjust size */
  cursor: pointer;
  color: black;
  border: 2px solid #0F141A; /* Correct way to define a border */
  border-radius: 4px; /* Optional: makes corners rounded */
  padding: 2px; /* Optional: adds space around the button */
  transition: color 0.3s ease-in-out;
}



/* Swiper CSS */
/* Custom CSS for Swiper */
.popular-products-swiper {
  position: relative;
}

/* Style for Swiper navigation arrows */
.swiper-button-next,
.swiper-button-prev {
  background-color: #000; /* Change arrow background color */
  width: 40px; /* Adjust arrow size */
  height: 40px;
  border-radius: 50%; /* Make it round */
  color: #fff; /* Arrow icon color */
  transition: background-color 0.3s ease, opacity 0.3s ease;
  opacity: 0.5; /* Initial opacity */
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: #373636; /* Change hover background color */
  opacity: 1; /* Full opacity on hover */
}

/* Arrow icon positioning */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px; /* Adjust icon size */
  font-weight: bold;
}

/* Pagination styling */
.swiper-pagination {
  position: absolute;
  bottom: 10px;

}

.swiper-pagination-bullet {
  background-color: #000; /* Pagination bullet color */
  opacity: 0.5;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  transition: opacity 0.3s ease;

}

.swiper-pagination-bullet-active {
  background-color: #f3a32b; /* Active pagination bullet color */
  opacity: 1;
}