/* Reset and general styles */
body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
      overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: auto;   /* Show vertical scrollbar if necessary */
}

/* Header styles */
header {
  background-color: #03396c;
  color: #ecf0f1;
  height: 100px; /* Set a specific height for the header */
  display: flex;
  justify-content: center; /* Center items along the main axis */
  align-items: center;
  position: relative; /* Add relative positioning for centering */
}

/* Hamburger menu styles */
.hamburger {
  cursor: pointer;
  font-size: 28px; /* Increased hamburger icon size */
  color: #ecf0f1;
  padding: 0 20px;
  position: absolute; /* Position absolutely within the header */
  left: 0; /* Align on the left */
}

#hamburger {
  display: block;
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 28px;
  color: #ecf0f1;
  cursor: pointer;
  border: none;
  background: none;
  padding: 5px;
  transition: transform 0.3s ease-in-out;
}

#hamburger.active {
  transform: rotate(90deg);
}

/* Logo styles */
.logo {
  font-size: 24px;
  text-align: center; /* Center text */
  flex-grow: 1; /* Allow the logo to take available space */
}

/* Mobile menu styles */
.menu {
  position: fixed;
  top: 0;
  left: -300px; /* Start with a negative value to slide from left */
  width: 200px;
  height: 100%;
  background-color: #03397c;
  transition: left 0.3s ease-in-out;
  box-shadow: 0px 8px 20px rgba(1,31,75);
  display: flex;
  flex-direction: column;
  padding-top: 10px; /* Add space for the heading */
  z-index: 1000; /* Increase the z-index */
}

/* Active menu state */
.menu.active {
  left: 0;
}

/* Menu heading styles */
.menu-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ecf0f1;
  padding: 15px;
  margin-top: 0;
  position: relative; /* Add this line */
}

/* Menu link styles */
.menu a {
  display: block;
  color: #ecf0f1;
  padding: 15px;
  text-align: left;
  text-decoration: none;
  transition: background-color 0.2s;
}

.menu a:hover {
  background-color: #34495e;
}

.menu a i {
  margin-right: 10px; /* Adjust this value to increase or decrease spacing */
}

.close-button {
  font-size: 28px;
  color: #ecf0f1;
  cursor: pointer;
  border: none;
  background: none;
  padding: 5px;
  position: relative; /* Add this line */
}

/* Footer styles */
footer {
  background-color: #03397c;
  color: #ecf0f1;
  padding: 40px 0; /* Increased footer height */
  text-align: center;
  margin-top: 20px;
}

.social-icons {
  margin-top: 15px;
}

.social-icons a {
  display: inline-block;
  margin: 0 15px;
  font-size: 24px;
}

/* Social icon styles */
.social-icons a i {
  color: #ecf0f1;
}

/* Responsive styles */
@media (max-width: 768px) {
  .logo {
    font-size: 20px;
  }
  .menu {
    padding-top: 60px;
  }
  .menu a {
    padding: 10px;
  }
}

@media (max-width: 768px) {
  .menu.active {
    padding-top: 5px; /* Add more padding for small screens */
  }
}

  .search-bar {
    display: flex;
    align-items: center;
    max-width: 90%; /* Adjust the width as needed */
    margin: 0 auto;
    padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .search-input {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 4px;
    outline: none; /* Remove the outline on focus */
    font-size: 16px; /* Adjust font size as needed */
  }

  .search-button {
    background-color: #03396c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .search-button:hover {
    background-color: #0056b3;
  }
  
  /* Media query for screens smaller than 768px */
@media (max-width: 767px) {
  .search-bar {
    padding: 8px; /* Adjusted padding for smaller screens */
    margin-top: 8px;
    margin-bottom: 8px;
  }
  
  .search-input {
    padding: 8px;
    font-size: 14px; /* Reduced font size for smaller screens */
  }
  
  .search-button {
    padding: 8px 12px; /* Adjusted padding for smaller screens */
  }
}

/* Updated Product Card Container */
.product-cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 30px 10px 0 10px; /* Simplify margin shorthand */
}

/* Updated Product Card */
.product-card {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 20px;
  width: 300px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  text-decoration: none;
  color: #333;
  background-color: #fff;
  border-radius: 12px;
  transform: translateY(0);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  overflow: hidden;
  height: auto;
}


@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}

@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
    transform: rotateX(-100deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: top;
    transform-origin: top;
    opacity: 1;
  }
}
/* Updated Product Card Hover State */
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}

/* Updated Product Image */
.product-image {
  max-width: 100%;
  max-height: 180px; /* Slightly increased max-height */
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.2s;
  margin-bottom: 10px;
}

/* Add a subtle scale effect on image hover */
.product-card:hover .product-image {
  transform: scale(1.05);
}

/* Updated Product Title */
.product-title {
  font-size: 1.2em; /* Decreased font size for the title */
  margin: 10px 0; /* Reduce margin for a more compact design */
  color: #333;
  font-weight: bold;
  transition: color 0.2s;
  margin-bottom: 20px;
}

/* Updated Product Price */
.product-price {
  font-size: 1.3em;
  color: #007BFF;
  font-weight: bold;
}

.no-items-message {
  display: none;
  text-align: center; /* Center-align the text */
  margin-top: 20px; /* Add spacing from the product cards */
  color: #e74c3c; /* Red color for attention */
  font-size: 18px; /* Adjust font size */
}

/* Style for the category dropdown */
.category-dropdown {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 12px; /* Increased padding for better spacing */
  border: 1px solid #ddd; /* Softer border color */
  border-radius: 8px; /* Slightly rounded edges */
  font-size: 16px;
  background-color: #f4f4f4; /* Lighter background color */
  color: #444; /* Darker text color for better contrast */
  margin-top: 20px; /* Increased top margin for spacing */
}

/* Style for dropdown options */
.category-dropdown option {
  font-size: 16px;
  padding: 8px 10px; /* Adjusted padding for better spacing */
}

/* Centered styling for the dropdown label */
.categories label {
  display: block;
  text-align: center;
  margin-bottom: 12px; /* Slightly increased bottom margin */
  margin-top: 20px;
  font-size: 20px; /* Increased font size for emphasis */
  font-weight: 600; /* Slightly bolder font weight */
}

/* Media query for screens smaller than 768px */
@media (max-width: 767px) {
  .category-dropdown {
    max-width: 250px; /* Adjusted max width for smaller screens */
    font-size: 14px; /* Reduced font size for smaller screens */
  }
  
  /* Adjust styles for dropdown options */
  .category-dropdown option {
    font-size: 14px;
    padding: 6px 8px; /* Adjusted padding for smaller screens */
  }
  
  /* Adjust styles for the dropdown label */
  .categories label {
    font-size: 18px; /* Reduced font size for smaller screens */
  }
}

/* Add this code to your styles.css */
.banner {
  position: relative;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1026%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1027%26quot%3b)'%3e%3c/rect%3e%3cpath d='M642.262%2c639.787C693.981%2c640.244%2c734.607%2c601.335%2c760.872%2c556.78C787.65%2c511.355%2c805.756%2c454.75%2c777.638%2c410.142C750.661%2c367.345%2c692.808%2c366.512%2c642.262%2c368.61C596.485%2c370.51%2c549.135%2c381.654%2c525.046%2c420.626C499.854%2c461.382%2c504.627%2c512.468%2c527.224%2c554.718C551.332%2c599.792%2c591.148%2c639.336%2c642.262%2c639.787' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M660.95 453.32 a106.57 106.57 0 1 0 213.14 0 a106.57 106.57 0 1 0 -213.14 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M252.93 417.96 a113.23 113.23 0 1 0 226.46 0 a113.23 113.23 0 1 0 -226.46 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M800.267%2c527.827C817.711%2c526.837%2c830.835%2c514.058%2c839.833%2c499.081C849.19%2c483.507%2c856.44%2c464.781%2c847.72%2c448.841C838.745%2c432.435%2c818.955%2c426.077%2c800.267%2c426.756C782.806%2c427.39%2c767.673%2c437.255%2c758.43%2c452.083C748.534%2c467.958%2c743.034%2c487.684%2c752.079%2c504.059C761.36%2c520.862%2c781.102%2c528.914%2c800.267%2c527.827' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M460.129%2c447.256C511.377%2c445.883%2c555.005%2c414.627%2c581.534%2c370.759C609.166%2c325.066%2c622.918%2c268.337%2c596.33%2c222.029C569.656%2c175.57%2c513.7%2c158.967%2c460.129%2c159.304C407.248%2c159.637%2c354.414%2c178.586%2c326.864%2c223.725C298.227%2c270.644%2c298.758%2c330.367%2c326.906%2c377.581C354.411%2c423.716%2c406.436%2c448.695%2c460.129%2c447.256' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M689.01 552.04 a161.86 161.86 0 1 0 323.72 0 a161.86 161.86 0 1 0 -323.72 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M-3.01 548.08 a154.54 154.54 0 1 0 309.08 0 a154.54 154.54 0 1 0 -309.08 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1147.619%2c542.725C1200.678%2c544.852%2c1255.593%2c524.086%2c1281.212%2c477.573C1306.15%2c432.296%2c1287.707%2c379.244%2c1262.525%2c334.101C1236.463%2c287.38%2c1201.064%2c240.47%2c1147.619%2c238.081C1090.947%2c235.548%2c1039.06%2c272.36%2c1013.425%2c322.966C989.902%2c369.402%2c1004.247%2c423.13%2c1031.375%2c467.556C1057.149%2c509.765%2c1098.203%2c540.744%2c1147.619%2c542.725' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M647.57 99.97 a96.54 96.54 0 1 0 193.08 0 a96.54 96.54 0 1 0 -193.08 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M992.356%2c126.47C1016.133%2c126.216%2c1036.275%2c111.607%2c1048.994%2c91.517C1062.847%2c69.635%2c1071.301%2c43.078%2c1059.859%2c19.844C1047.198%2c-5.867%2c1021.014%2c-23.666%2c992.356%2c-23.495C963.954%2c-23.326%2c939.045%2c-4.709%2c926.23%2c20.639C914.546%2c43.749%2c919.863%2c70.786%2c933.585%2c92.748C946.413%2c113.278%2c968.149%2c126.728%2c992.356%2c126.47' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M607.109%2c787.216C662.232%2c786.5%2c721.443%2c773.081%2c748.285%2c724.929C774.639%2c677.652%2c754.24%2c620.923%2c725.305%2c575.181C698.729%2c533.168%2c656.753%2c504.361%2c607.109%2c501.751C552.185%2c498.864%2c495.234%2c515.411%2c465.235%2c561.51C432.639%2c611.599%2c427.63%2c678.086%2c459.433%2c728.682C489.636%2c776.731%2c550.361%2c787.953%2c607.109%2c787.216' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1066.15 265.77 a97.47 97.47 0 1 0 194.94 0 a97.47 97.47 0 1 0 -194.94 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M163.34%2c434.637C209.31%2c433.424%2c250.443%2c409.612%2c275.111%2c370.802C301.942%2c328.59%2c318.642%2c274.33%2c292.232%2c231.854C266.727%2c190.835%2c211.608%2c189.224%2c163.34%2c191.041C119.199%2c192.703%2c74.527%2c204.077%2c50.229%2c240.966C23.435%2c281.644%2c16.3%2c334.921%2c40.865%2c376.982C65.255%2c418.743%2c114.995%2c435.912%2c163.34%2c434.637' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1092.18 348.44 a105.34 105.34 0 1 0 210.68 0 a105.34 105.34 0 1 0 -210.68 0z' fill='rgba(28%2c 83%2c 142%2c 0.4)' class='triangle-float2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1026'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='15.28%25' y1='-39.29%25' x2='84.72%25' y2='139.29%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1027'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='%2300459e' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e"); /* Your banner image URL */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 600px; /* Set the desired height for your banner */
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.banner-heading {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ff3366, #ff9900);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glow 3s ease-in-out infinite alternate;
    -webkit-animation: bounce-in-top 1.1s both;
  animation: bounce-in-top 1.1s both;
}

/* Paste the provided keyframes animation */
@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
    transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
    transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
    transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

.banner-text {
  font-size: 24px;
  color: #ffffffb3;
  animation: slideUp 2s ease-in-out infinite;
}


.transparent-header {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  max-width: 100px; /* Adjust the size as needed */
  max-height: 100px; /* Adjust the size as needed */
}



@media (max-width: 767px) {
  .banner {
    height: 400px; /* Adjust the height for smaller screens */
  }
  
   .banner-heading {
    font-size: 28px; /* Adjust font size for smaller screens */
  }
  
  .banner-text {
    font-size: 18px; /* Adjust font size for smaller screens */
  }
}
  
  @media (min-width: 768px) and (max-width: 991px) {
  .banner {
    height: 500px; /* Adjust the height for medium-sized screens */
  }
  }
  
  @media (min-width: 992px) {
  .banner {
    height: 600px; /* Maintain the original height for larger screens */
  }
  }

.blog-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 30px;
  margin-right: 10px;
  margin-left: 10px;
}

.blog-post {
    width: calc(50% - 20px); /* Adjust as needed to leave space for margins */
    margin-bottom: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease;
	   -webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.blog-post:hover {
    transform: translateY(-5px);
}

.post-content {
    padding: 20px;
}

.post-title {
    font-size: 24px;
    margin-bottom: 10px;
    color: #3468C0;
}

.post-description {
    font-size: 16px;
    margin-bottom: 15px;
	font-weight: bold;
}

.read-more-btn {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff3366, #ff9900);
    color: #fff;
	font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* Styling for blog post images */
.blog-post img {
    width: 100%;
    height: 400px; /* Adjust as needed for desired height */
    object-fit: cover; /* Ensures images cover the entire space */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .blog-post {
        width: 100%;
		margin-left: 10px;
		margin-right: 10px;
    }
}

.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    width: auto; /* Set the width as needed */
    height: auto; /* Set the height as needed */
    background-color: #fff;
    padding: 20px;
    color: #393939;
    text-align: center;
    font-size: 1.11rem;
	background: #ffffff;
	box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1),
            -10px -10px 40px rgba(255, 255, 255, 0.7);
}


.card h3 {
    margin-bottom: 10px;
	color: #3468C0;
}

.card p {
	font-weight: bold;
}

.card .icon {
	font-size: 3rem; /* Adjust the font size as needed */
	  background: linear-gradient(135deg, #ff3366, #ff9900);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glow 3s ease-in-out infinite alternate;
	margin-bottom: 1px; /* Adjust the margin as needed */
	margin-top: 2px;
}

@media (max-width: 600px) {
    .card-container {
        flex-direction: column; /* Stack cards vertically */
    }

    .card {
        width: auto;
		height: auto;
    }
}

@media (max-width: 400px) {
    .card-container {
        flex-direction: column; /* Stack cards vertically */
    }

    .card {
        width: auto%;
		height: auto;
    }
}

@media (max-width: 300px) {
    .card-container {
        flex-direction: column; /* Stack cards vertically */
    }

    .card {
        width: auto%;
		height: auto;
    }
}

@media (min-width: 600px) and (max-width: 940px) {
    .card-container {
        flex-direction: column; /* Stack cards vertically */
		margin-left: 15px;
		margin-right: 15px;
    }

    .card {
        width: auto%;
        height: auto;
    }
}

@media (min-width: 500px) and (max-width: 590px) {
    .card-container {
        flex-direction: column; /* Stack cards vertically */
		margin-left: 15px;
		margin-right: 15px;
    }

    .card {
        width: auto%;
        height: auto;
    }
}

#package-description {
    font-size: 2em; /* Adjust the size as needed */
      background: linear-gradient(135deg, #ff3366, #ff9900);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glow 3s ease-in-out infinite alternate;
    text-align: center;
    font-weight: bold;
	top: 50%;
	left: 50%;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
}

@media (max-width: 600px) {
    #package-description {
        font-size: 1.4em; /* Adjust the size for smaller screens */

    }
}

@media (max-width: 400px) {
    #package-description {
        font-size: 1.3em; /* Adjust the size for even smaller screens */
    }
}

  .container {
    text-align: center;
	margin-bottom: 50px;
  }

  .heading {
    font-size: 2em;
    margin-bottom: 10px;
	color: #3468C0;
  }

  .sentence {
    font-size: 1.2em;
	font-weight: bold;
  }

  @media screen and (max-width: 600px) {
    .heading {
      font-size: 1.5em;
    }

    .sentence {
      font-size: 1em;
    }
  }

.product-btn {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff3366, #ff9900);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
	margin-top: 20px;
	font-weight: bold;
}	

  .container1 {
    text-align: center;
	margin-bottom: 20px;
  }

  .heading {
    font-size: 2em;
    margin-bottom: 10px;
	color: #3468C0;
  }

  .sentence {
    font-size: 1.2em;
	font-weight: bold;
  }

  @media screen and (max-width: 600px) {
    .heading {
      font-size: 1.5em;
    }

    .sentence {
      font-size: 1em;
    }
  }

    @keyframes scrollUp {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .scroll-up {
        animation: scrollUp 0.5s ease-in-out;
    }

.pagination-container {
    text-align: center;
    margin-top: 20px;
}

.pagination-container button {
    padding: 10px 20px;
    background: linear-gradient(135deg, #ff3366, #ff9900);
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin: 0 5px;
}

.pagination-container button:hover {
    background-color: #45a049;
}

.pagination-container button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

	
	.mission-container {
  max-width: 800px;
  margin: 50px auto;
  text-align: center;
}

.mission-section {
  margin-bottom: 50px;
}

.mission-heading {
  color: #3468C0;
  font-size: 32px;
}

.mission-text {
  font-size: 18px;
  font-weight: bold;
}

@media only screen and (max-width: 768px) {
  .mission-text {
    font-size: 16px;
    padding: 0 20px; /* Add padding to the left and right */
  }
}

@media only screen and (max-width: 576px) {
  .mission-text {
    font-size: 16px;
    max-width: 500px; /* Set a maximum width for smaller screens */
    margin: 0 auto; /* Center the text horizontally */
  }
}

.commission-disclaimer {
  text-align: center;
  font-size: 14px; /* Adjust as needed */
  background-color: #03396c; /* Background color */
  color: white; /* Text color */
  padding: 10px; /* Padding around the text */
}

@media only screen and (max-width: 768px) {
  .commission-disclaimer {
    font-size: 12px; /* Adjust as needed for smaller screens */
  }
}